

<!DOCTYPE html>
<html class="writer-html5" lang="en" >
<head>
  <meta charset="utf-8" />
  
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  
  <title>Scroll &mdash; LVGL  documentation</title>
  

  
  <link rel="stylesheet" href="../_static/css/theme.css" type="text/css" />
  <link rel="stylesheet" href="../_static/pygments.css" type="text/css" />
  <link rel="stylesheet" href="../_static/pygments.css" type="text/css" />
  <link rel="stylesheet" href="../_static/css/theme.css" type="text/css" />
  <link rel="stylesheet" href="../_static/css/custom.css" type="text/css" />
  <link rel="stylesheet" href="../_static/css/fontawesome.min.css" type="text/css" />

  
  
    <link rel="shortcut icon" href="../_static/favicon.png"/>
  

  
  

  
    <link rel="canonical" href="https://docs.lvgl.io/v8.0/en/html/overview/scroll.html" />

  
  <!--[if lt IE 9]>
    <script src="../_static/js/html5shiv.min.js"></script>
  <![endif]-->
  
    
      <script type="text/javascript" id="documentation_options" data-url_root="../" src="../_static/documentation_options.js"></script>
        <script data-url_root="../" id="documentation_options" src="../_static/documentation_options.js"></script>
        <script src="../_static/jquery.js"></script>
        <script src="../_static/underscore.js"></script>
        <script src="../_static/doctools.js"></script>
    
    <script type="text/javascript" src="../_static/js/theme.js"></script>

    
    <link rel="index" title="Index" href="../genindex.html" />
    <link rel="search" title="Search" href="../search.html" />
    <link rel="next" title="Layers" href="layer.html" />
    <link rel="prev" title="Style properties" href="style-props.html" />
 
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-78811084-3"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

	gtag('config', 'UA-78811084-3', { 'anonymize_ip': true });
</script>

</head>

<body class="wy-body-for-nav">

   
  <div class="wy-grid-for-nav">
    
    <nav data-toggle="wy-nav-shift" class="wy-nav-side">
      <div class="wy-side-scroll">
        <div class="wy-side-nav-search" >
          

          
            <a href="../index.html">
          

          
            
            <img src="../_static/logo_lvgl.png" class="logo" alt="Logo"/>
          
          </a>

          
            
            
              <div class="version">
                8.0
              </div>
            
          

          
<div role="search">
  <form id="rtd-search-form" class="wy-form" action="../search.html" method="get">
    <input type="text" name="q" placeholder="Search docs" />
    <input type="hidden" name="check_keywords" value="yes" />
    <input type="hidden" name="area" value="default" />
  </form>
</div>

          
        </div>

        
        <div class="wy-menu wy-menu-vertical" data-spy="affix" role="navigation" aria-label="main navigation">
          
            
            
              
            
            
              <ul class="current">
<li class="toctree-l1"><a class="reference internal" href="../intro/index.html">Introduction</a><ul>
<li class="toctree-l2"><a class="reference internal" href="../intro/index.html#key-features">Key features</a></li>
<li class="toctree-l2"><a class="reference internal" href="../intro/index.html#requirements">Requirements</a></li>
<li class="toctree-l2"><a class="reference internal" href="../intro/index.html#license">License</a></li>
<li class="toctree-l2"><a class="reference internal" href="../intro/index.html#repository-layout">Repository layout</a></li>
<li class="toctree-l2"><a class="reference internal" href="../intro/index.html#release-policy">Release policy</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../intro/index.html#release-cycle">Release cycle</a></li>
<li class="toctree-l3"><a class="reference internal" href="../intro/index.html#branches">Branches</a></li>
<li class="toctree-l3"><a class="reference internal" href="../intro/index.html#changelog">Changelog</a></li>
<li class="toctree-l3"><a class="reference internal" href="../intro/index.html#version-support">Version support</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../intro/index.html#faq">FAQ</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../intro/index.html#where-can-i-ask-questions">Where can I ask questions?</a></li>
<li class="toctree-l3"><a class="reference internal" href="../intro/index.html#is-my-mcu-hardware-supported">Is my MCU/hardware supported?</a></li>
<li class="toctree-l3"><a class="reference internal" href="../intro/index.html#is-my-display-supported">Is my display supported?</a></li>
<li class="toctree-l3"><a class="reference internal" href="../intro/index.html#nothing-happens-my-display-driver-is-not-called-what-have-i-missed">Nothing happens, my display driver is not called. What have I missed?</a></li>
<li class="toctree-l3"><a class="reference internal" href="../intro/index.html#why-is-the-display-driver-called-only-once-only-the-upper-part-of-the-display-is-refreshed">Why is the display driver called only once? Only the upper part of the display is refreshed.</a></li>
<li class="toctree-l3"><a class="reference internal" href="../intro/index.html#why-do-i-see-only-garbage-on-the-screen">Why do I see only garbage on the screen?</a></li>
<li class="toctree-l3"><a class="reference internal" href="../intro/index.html#why-i-see-nonsense-colors-on-the-screen">Why I see nonsense colors on the screen?</a></li>
<li class="toctree-l3"><a class="reference internal" href="../intro/index.html#how-to-speed-up-my-ui">How to speed up my UI?</a></li>
<li class="toctree-l3"><a class="reference internal" href="../intro/index.html#how-to-reduce-flash-rom-usage">How to reduce flash/ROM usage?</a></li>
<li class="toctree-l3"><a class="reference internal" href="../intro/index.html#how-to-reduce-the-ram-usage">How to reduce the RAM usage</a></li>
<li class="toctree-l3"><a class="reference internal" href="../intro/index.html#how-to-work-with-an-operating-system">How to work with an operating system?</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l1"><a class="reference internal" href="../get-started/index.html">Get started</a><ul>
<li class="toctree-l2"><a class="reference internal" href="../get-started/quick-overview.html">Quick overview</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../get-started/quick-overview.html#get-started-in-a-simulator">Get started in a simulator</a></li>
<li class="toctree-l3"><a class="reference internal" href="../get-started/quick-overview.html#add-lvgl-into-your-project">Add LVGL into your project</a></li>
<li class="toctree-l3"><a class="reference internal" href="../get-started/quick-overview.html#learn-the-basics">Learn the basics</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../get-started/quick-overview.html#widgets">Widgets</a></li>
<li class="toctree-l4"><a class="reference internal" href="../get-started/quick-overview.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../get-started/quick-overview.html#parts">Parts</a></li>
<li class="toctree-l4"><a class="reference internal" href="../get-started/quick-overview.html#states">States</a></li>
<li class="toctree-l4"><a class="reference internal" href="../get-started/quick-overview.html#styles">Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../get-started/quick-overview.html#themes">Themes</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../get-started/quick-overview.html#examples">Examples</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../get-started/quick-overview.html#c">C</a></li>
<li class="toctree-l4"><a class="reference internal" href="../get-started/quick-overview.html#id1">MicroPython</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../get-started/quick-overview.html#micropython">Micropython</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../get-started/pc-simulator.html">Simulator on PC</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../get-started/pc-simulator.html#select-an-ide">Select an IDE</a></li>
<li class="toctree-l3"><a class="reference internal" href="../get-started/pc-simulator.html#set-up-eclipse-cdt">Set-up Eclipse CDT</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../get-started/pc-simulator.html#install-eclipse-cdt">Install Eclipse CDT</a></li>
<li class="toctree-l4"><a class="reference internal" href="../get-started/pc-simulator.html#install-sdl-2">Install SDL 2</a></li>
<li class="toctree-l4"><a class="reference internal" href="../get-started/pc-simulator.html#pre-configured-project">Pre-configured project</a></li>
<li class="toctree-l4"><a class="reference internal" href="../get-started/pc-simulator.html#add-the-pre-configured-project-to-eclipse-cdt">Add the pre-configured project to Eclipse CDT</a></li>
<li class="toctree-l4"><a class="reference internal" href="../get-started/pc-simulator.html#compile-and-run">Compile and Run</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../get-started/stm32.html">STM32</a></li>
<li class="toctree-l2"><a class="reference internal" href="../get-started/nxp.html">NXP</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../get-started/nxp.html#creating-new-project-with-lvgl">Creating new project with LVGL</a></li>
<li class="toctree-l3"><a class="reference internal" href="../get-started/nxp.html#adding-hw-acceleration-for-nxp-imx-rt-platforms-using-pxp-pixel-pipeline-engine-for-existing-projects">Adding HW acceleration for NXP iMX RT platforms using PXP (PiXel Pipeline) engine for existing projects</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../get-started/nxp.html#features-supported">Features supported:</a></li>
<li class="toctree-l4"><a class="reference internal" href="../get-started/nxp.html#basic-configuration">Basic configuration:</a></li>
<li class="toctree-l4"><a class="reference internal" href="../get-started/nxp.html#basic-initialization">Basic initialization:</a></li>
<li class="toctree-l4"><a class="reference internal" href="../get-started/nxp.html#project-setup">Project setup:</a></li>
<li class="toctree-l4"><a class="reference internal" href="../get-started/nxp.html#advanced-configuration">Advanced configuration:</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../get-started/espressif.html">Espressif (ESP32)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../get-started/espressif.html#get-the-lvgl-demo-project-for-esp32">Get the LVGL demo project for ESP32</a></li>
<li class="toctree-l3"><a class="reference internal" href="../get-started/espressif.html#use-lvgl-in-your-esp32-project">Use LVGL in your ESP32 project</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../get-started/espressif.html#prerequisites">Prerequisites</a></li>
<li class="toctree-l4"><a class="reference internal" href="../get-started/espressif.html#get-lvgl">Get LVGL</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../get-started/espressif.html#use-lvgl-esp32-drivers-in-your-project">Use lvgl_esp32_drivers in your project</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../get-started/espressif.html#support-for-esp32-s2">Support for ESP32-S2</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../get-started/arduino.html">Arduino</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../get-started/arduino.html#get-the-lvgl-ardunio-library">Get the LVGL Ardunio library</a></li>
<li class="toctree-l3"><a class="reference internal" href="../get-started/arduino.html#set-up-drivers">Set up drivers</a></li>
<li class="toctree-l3"><a class="reference internal" href="../get-started/arduino.html#configure-lvgl">Configure LVGL</a></li>
<li class="toctree-l3"><a class="reference internal" href="../get-started/arduino.html#configure-the-examples">Configure the examples</a></li>
<li class="toctree-l3"><a class="reference internal" href="../get-started/arduino.html#initialize-lvgl-and-run-an-example">Initialize LVGL and run an example</a></li>
<li class="toctree-l3"><a class="reference internal" href="../get-started/arduino.html#debugging-and-logging">Debugging and logging</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../get-started/micropython.html">Micropython</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../get-started/micropython.html#what-is-micropython">What is Micropython?</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../get-started/micropython.html#highlights-of-micropython">Highlights of Micropython</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../get-started/micropython.html#why-micropython-lvgl">Why Micropython + LVGL?</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../get-started/micropython.html#here-are-some-advantages-of-using-lvgl-in-micropython">Here are some advantages of using LVGL in Micropython:</a></li>
<li class="toctree-l4"><a class="reference internal" href="../get-started/micropython.html#micropython-lvgl-could-be-used-for">Micropython + LVGL could be used for:</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../get-started/micropython.html#so-what-does-it-look-like">So what does it look like?</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../get-started/micropython.html#a-simple-example">A simple example</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../get-started/micropython.html#how-can-i-use-it">How can I use it?</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../get-started/micropython.html#online-simulator">Online Simulator</a></li>
<li class="toctree-l4"><a class="reference internal" href="../get-started/micropython.html#pc-simulator">PC Simulator</a></li>
<li class="toctree-l4"><a class="reference internal" href="../get-started/micropython.html#embedded-platform">Embedded platform</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../get-started/micropython.html#where-can-i-find-more-information">Where can I find more information?</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../get-started/nuttx.html">NuttX RTOS</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../get-started/nuttx.html#what-is-nuttx">What is NuttX?</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../get-started/nuttx.html#highlights-of-nuttx">Highlights of NuttX</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../get-started/nuttx.html#why-nuttx-lvgl">Why NuttX + LVGL?</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../get-started/nuttx.html#here-are-some-advantages-of-using-lvgl-in-nuttx">Here are some advantages of using LVGL in NuttX</a></li>
<li class="toctree-l4"><a class="reference internal" href="../get-started/nuttx.html#nuttx-lvgl-could-be-used-for">NuttX + LVGL could be used for</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../get-started/nuttx.html#how-to-get-started-with-nuttx-and-lvgl">How to get started with NuttX and LVGL?</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../get-started/nuttx.html#first-you-need-to-install-the-pre-requisite-on-your-system">First you need to install the pre-requisite on your system</a></li>
<li class="toctree-l4"><a class="reference internal" href="../get-started/nuttx.html#now-let-s-to-create-a-workspace-to-save-our-files">Now let's to create a workspace to save our files</a></li>
<li class="toctree-l4"><a class="reference internal" href="../get-started/nuttx.html#clone-the-nuttx-and-apps-repositories">Clone the NuttX and Apps repositories:</a></li>
<li class="toctree-l4"><a class="reference internal" href="../get-started/nuttx.html#configure-nuttx-to-use-the-stm32f429i-disco-board-and-the-lvgl-demo">Configure NuttX to use the stm32f429i-disco board and the LVGL Demo</a></li>
<li class="toctree-l4"><a class="reference internal" href="../get-started/nuttx.html#flashing-the-firmware-in-the-board-using-openocd">Flashing the firmware in the board using OpenOCD:</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../get-started/nuttx.html#where-can-i-find-more-information">Where can I find more information?</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l1"><a class="reference internal" href="../porting/index.html">Porting</a><ul>
<li class="toctree-l2"><a class="reference internal" href="../porting/project.html">Set-up a project</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../porting/project.html#get-the-library">Get the library</a></li>
<li class="toctree-l3"><a class="reference internal" href="../porting/project.html#configuration-file">Configuration file</a></li>
<li class="toctree-l3"><a class="reference internal" href="../porting/project.html#initialization">Initialization</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../porting/display.html">Display interface</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../porting/display.html#draw-buffer">Draw buffer</a></li>
<li class="toctree-l3"><a class="reference internal" href="../porting/display.html#display-driver">Display driver</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../porting/display.html#mandatory-fields">Mandatory fields</a></li>
<li class="toctree-l4"><a class="reference internal" href="../porting/display.html#optional-fields">Optional fields</a></li>
<li class="toctree-l4"><a class="reference internal" href="../porting/display.html#examples">Examples</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../porting/display.html#rotation">Rotation</a></li>
<li class="toctree-l3"><a class="reference internal" href="../porting/display.html#further-reading">Further reading</a></li>
<li class="toctree-l3"><a class="reference internal" href="../porting/display.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../porting/indev.html">Input device interface</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../porting/indev.html#types-of-input-devices">Types of input devices</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../porting/indev.html#touchpad-mouse-or-any-pointer">Touchpad, mouse or any pointer</a></li>
<li class="toctree-l4"><a class="reference internal" href="../porting/indev.html#keypad-or-keyboard">Keypad or keyboard</a></li>
<li class="toctree-l4"><a class="reference internal" href="../porting/indev.html#encoder">Encoder</a></li>
<li class="toctree-l4"><a class="reference internal" href="../porting/indev.html#button">Button</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../porting/indev.html#other-features">Other features</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../porting/indev.html#parameters">Parameters</a></li>
<li class="toctree-l4"><a class="reference internal" href="../porting/indev.html#feedback">Feedback</a></li>
<li class="toctree-l4"><a class="reference internal" href="../porting/indev.html#associating-with-a-display">Associating with a display</a></li>
<li class="toctree-l4"><a class="reference internal" href="../porting/indev.html#buffered-reading">Buffered reading</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../porting/indev.html#further-reading">Further reading</a></li>
<li class="toctree-l3"><a class="reference internal" href="../porting/indev.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../porting/tick.html">Tick interface</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../porting/tick.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../porting/task-handler.html">Task Handler</a></li>
<li class="toctree-l2"><a class="reference internal" href="../porting/sleep.html">Sleep management</a></li>
<li class="toctree-l2"><a class="reference internal" href="../porting/os.html">Operating system and interrupts</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../porting/os.html#tasks-and-threads">Tasks and threads</a></li>
<li class="toctree-l3"><a class="reference internal" href="../porting/os.html#interrupts">Interrupts</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../porting/log.html">Logging</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../porting/log.html#log-level">Log level</a></li>
<li class="toctree-l3"><a class="reference internal" href="../porting/log.html#printing-logs">Printing logs</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../porting/log.html#logging-with-printf">Logging with printf</a></li>
<li class="toctree-l4"><a class="reference internal" href="../porting/log.html#custom-log-function">Custom log function</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../porting/log.html#add-logs">Add logs</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l1 current"><a class="reference internal" href="index.html">Overview</a><ul class="current">
<li class="toctree-l2"><a class="reference internal" href="object.html">Objects</a><ul>
<li class="toctree-l3"><a class="reference internal" href="object.html#attributes">Attributes</a><ul>
<li class="toctree-l4"><a class="reference internal" href="object.html#basic-attributes">Basic attributes</a></li>
<li class="toctree-l4"><a class="reference internal" href="object.html#specific-attributes">Specific attributes</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="object.html#working-mechanisms">Working mechanisms</a><ul>
<li class="toctree-l4"><a class="reference internal" href="object.html#parent-child-structure">Parent-child structure</a></li>
<li class="toctree-l4"><a class="reference internal" href="object.html#moving-together">Moving together</a></li>
<li class="toctree-l4"><a class="reference internal" href="object.html#visibility-only-on-the-parent">Visibility only on the parent</a></li>
<li class="toctree-l4"><a class="reference internal" href="object.html#create-and-delete-objects">Create and delete objects</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="object.html#screens">Screens</a><ul>
<li class="toctree-l4"><a class="reference internal" href="object.html#create-screens">Create screens</a></li>
<li class="toctree-l4"><a class="reference internal" href="object.html#get-the-active-screen">Get the active screen</a></li>
<li class="toctree-l4"><a class="reference internal" href="object.html#load-screens">Load screens</a></li>
<li class="toctree-l4"><a class="reference internal" href="object.html#layers">Layers</a></li>
<li class="toctree-l4"><a class="reference internal" href="object.html#handling-multiple-displays">Handling multiple displays</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="object.html#parts">Parts</a></li>
<li class="toctree-l3"><a class="reference internal" href="object.html#states">States</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="coords.html">Positions, sizes, and layouts</a><ul>
<li class="toctree-l3"><a class="reference internal" href="coords.html#overview">Overview</a><ul>
<li class="toctree-l4"><a class="reference internal" href="coords.html#units">Units</a></li>
<li class="toctree-l4"><a class="reference internal" href="coords.html#boxing-model">Boxing model</a></li>
<li class="toctree-l4"><a class="reference internal" href="coords.html#important-notes">Important notes</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="coords.html#position">Position</a><ul>
<li class="toctree-l4"><a class="reference internal" href="coords.html#simple-way">Simple way</a></li>
<li class="toctree-l4"><a class="reference internal" href="coords.html#align">Align</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="coords.html#size">Size</a><ul>
<li class="toctree-l4"><a class="reference internal" href="coords.html#id1">Simple way</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="coords.html#using-styles">Using styles</a></li>
<li class="toctree-l3"><a class="reference internal" href="coords.html#translation">Translation</a></li>
<li class="toctree-l3"><a class="reference internal" href="coords.html#transformation">Transformation</a><ul>
<li class="toctree-l4"><a class="reference internal" href="coords.html#min-and-max-size">Min and Max size</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="coords.html#layout">Layout</a><ul>
<li class="toctree-l4"><a class="reference internal" href="coords.html#id2">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="coords.html#built-in-layout">Built-in layout</a></li>
<li class="toctree-l4"><a class="reference internal" href="coords.html#flags">Flags</a></li>
<li class="toctree-l4"><a class="reference internal" href="coords.html#adding-new-layouts">Adding new layouts</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="coords.html#examples">Examples</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="style.html">Styles</a><ul>
<li class="toctree-l3"><a class="reference internal" href="style.html#states">States</a></li>
<li class="toctree-l3"><a class="reference internal" href="style.html#cascading-styles">Cascading styles</a></li>
<li class="toctree-l3"><a class="reference internal" href="style.html#inheritance">Inheritance</a></li>
<li class="toctree-l3"><a class="reference internal" href="style.html#parts">Parts</a></li>
<li class="toctree-l3"><a class="reference internal" href="style.html#initialize-styles-and-set-get-properties">Initialize styles and set/get properties</a></li>
<li class="toctree-l3"><a class="reference internal" href="style.html#add-and-remove-styles-to-a-widget">Add and remove styles to a widget</a><ul>
<li class="toctree-l4"><a class="reference internal" href="style.html#add-styles">Add styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="style.html#remove-styles">Remove styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="style.html#report-style-changes">Report style changes</a></li>
<li class="toctree-l4"><a class="reference internal" href="style.html#get-a-property-s-value-on-an-object">Get a property's value on an object</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="style.html#local-styles">Local styles</a></li>
<li class="toctree-l3"><a class="reference internal" href="style.html#properties">Properties</a><ul>
<li class="toctree-l4"><a class="reference internal" href="style.html#typical-background-properties">Typical background properties</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="style.html#transitions">Transitions</a></li>
<li class="toctree-l3"><a class="reference internal" href="style.html#color-filter">Color filter</a></li>
<li class="toctree-l3"><a class="reference internal" href="style.html#themes">Themes</a><ul>
<li class="toctree-l4"><a class="reference internal" href="style.html#extending-themes">Extending themes</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="style.html#examples">Examples</a><ul>
<li class="toctree-l4"><a class="reference internal" href="style.html#c">C</a></li>
<li class="toctree-l4"><a class="reference internal" href="style.html#micropython">MicroPython</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="style.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="style-props.html">Style properties</a><ul>
<li class="toctree-l3"><a class="reference internal" href="style-props.html#size-and-position">Size and position</a><ul>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#width">width</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#min-width">min_width</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#max-width">max_width</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#height">height</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#min-height">min_height</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#max-height">max_height</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#x">x</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#y">y</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#align">align</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#transform-width">transform_width</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#transform-height">transform_height</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#translate-x">translate_x</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#translate-y">translate_y</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#transform-zoom">transform_zoom</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#transform-angle">transform_angle</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="style-props.html#padding">Padding</a><ul>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#pad-top">pad_top</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#pad-bottom">pad_bottom</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#pad-left">pad_left</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#pad-right">pad_right</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#pad-row">pad_row</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#pad-column">pad_column</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="style-props.html#miscellaneous">Miscellaneous</a><ul>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#radius">radius</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#clip-corner">clip_corner</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#opa">opa</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#color-filter-dsc">color_filter_dsc</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#color-filter-opa">color_filter_opa</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#anim-time">anim_time</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#anim-speed">anim_speed</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#transition">transition</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#blend-mode">blend_mode</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#layout">layout</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#base-dir">base_dir</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="style-props.html#background">Background</a><ul>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#bg-color">bg_color</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#bg-opa">bg_opa</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#bg-grad-color">bg_grad_color</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#bg-grad-dir">bg_grad_dir</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#bg-main-stop">bg_main_stop</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#bg-grad-stop">bg_grad_stop</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#bg-img-src">bg_img_src</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#bg-img-opa">bg_img_opa</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#bg-img-recolor">bg_img_recolor</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#bg-img-recolor-opa">bg_img_recolor_opa</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#bg-img-tiled">bg_img_tiled</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="style-props.html#border">Border</a><ul>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#border-color">border_color</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#border-opa">border_opa</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#border-width">border_width</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#border-side">border_side</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#border-post">border_post</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="style-props.html#text">Text</a><ul>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#text-color">text_color</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#text-opa">text_opa</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#text-font">text_font</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#text-letter-space">text_letter_space</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#text-line-space">text_line_space</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#text-decor">text_decor</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#text-align">text_align</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="style-props.html#image">Image</a><ul>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#img-opa">img_opa</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#img-recolor">img_recolor</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#img-recolor-opa">img_recolor_opa</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="style-props.html#outline">Outline</a><ul>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#outline-width">outline_width</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#outline-color">outline_color</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#outline-opa">outline_opa</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#outline-pad">outline_pad</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="style-props.html#shadow">Shadow</a><ul>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#shadow-width">shadow_width</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#shadow-ofs-x">shadow_ofs_x</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#shadow-ofs-y">shadow_ofs_y</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#shadow-spread">shadow_spread</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#shadow-color">shadow_color</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#shadow-opa">shadow_opa</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="style-props.html#line">Line</a><ul>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#line-width">line_width</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#line-dash-width">line_dash_width</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#line-dash-gap">line_dash_gap</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#line-rounded">line_rounded</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#line-color">line_color</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#line-opa">line_opa</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="style-props.html#arc">Arc</a><ul>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#arc-width">arc_width</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#arc-rounded">arc_rounded</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#arc-color">arc_color</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#arc-opa">arc_opa</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#arc-img-src">arc_img_src</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l2 current"><a class="current reference internal" href="#">Scroll</a><ul>
<li class="toctree-l3"><a class="reference internal" href="#overview">Overview</a><ul>
<li class="toctree-l4"><a class="reference internal" href="#scrollbar">Scrollbar</a></li>
<li class="toctree-l4"><a class="reference internal" href="#events">Events</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="#basic-example">Basic example</a></li>
<li class="toctree-l3"><a class="reference internal" href="#features-of-scrolling">Features of scrolling</a><ul>
<li class="toctree-l4"><a class="reference internal" href="#scrollable">Scrollable</a></li>
<li class="toctree-l4"><a class="reference internal" href="#scroll-chain">Scroll chain</a></li>
<li class="toctree-l4"><a class="reference internal" href="#scroll-momentum">Scroll momentum</a></li>
<li class="toctree-l4"><a class="reference internal" href="#elastic-scroll">Elastic scroll</a></li>
<li class="toctree-l4"><a class="reference internal" href="#snapping">Snapping</a></li>
<li class="toctree-l4"><a class="reference internal" href="#scroll-one">Scroll one</a></li>
<li class="toctree-l4"><a class="reference internal" href="#scroll-on-focus">Scroll on focus</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="#scroll-manually">Scroll manually</a></li>
<li class="toctree-l3"><a class="reference internal" href="#self-size">Self size</a></li>
<li class="toctree-l3"><a class="reference internal" href="#examples">Examples</a><ul>
<li class="toctree-l4"><a class="reference internal" href="#c">C</a></li>
<li class="toctree-l4"><a class="reference internal" href="#micropython">MicroPython</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="layer.html">Layers</a><ul>
<li class="toctree-l3"><a class="reference internal" href="layer.html#order-of-creation">Order of creation</a></li>
<li class="toctree-l3"><a class="reference internal" href="layer.html#bring-to-the-foreground">Bring to the foreground</a></li>
<li class="toctree-l3"><a class="reference internal" href="layer.html#top-and-sys-layers">Top and sys layers</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="event.html">Events</a><ul>
<li class="toctree-l3"><a class="reference internal" href="event.html#add-events-to-the-object">Add events to the object</a></li>
<li class="toctree-l3"><a class="reference internal" href="event.html#remove-event-s-from-an-object">Remove event(s) from an object</a></li>
<li class="toctree-l3"><a class="reference internal" href="event.html#event-codes">Event codes</a><ul>
<li class="toctree-l4"><a class="reference internal" href="event.html#input-device-events">Input device events</a></li>
<li class="toctree-l4"><a class="reference internal" href="event.html#drawing-events">Drawing events</a></li>
<li class="toctree-l4"><a class="reference internal" href="event.html#other-events">Other events</a></li>
<li class="toctree-l4"><a class="reference internal" href="event.html#special-events">Special events</a></li>
<li class="toctree-l4"><a class="reference internal" href="event.html#custom-events">Custom events</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="event.html#sending-events">Sending events</a><ul>
<li class="toctree-l4"><a class="reference internal" href="event.html#refresh-event">Refresh event</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="event.html#fields-of-lv-event-t">Fields of lv_event_t</a></li>
<li class="toctree-l3"><a class="reference internal" href="event.html#event-bubbling">Event bubbling</a></li>
<li class="toctree-l3"><a class="reference internal" href="event.html#examples">Examples</a><ul>
<li class="toctree-l4"><a class="reference internal" href="event.html#c">C</a></li>
<li class="toctree-l4"><a class="reference internal" href="event.html#micropython">MicroPython</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="indev.html">Input devices</a><ul>
<li class="toctree-l3"><a class="reference internal" href="indev.html#pointers">Pointers</a></li>
<li class="toctree-l3"><a class="reference internal" href="indev.html#keypad-and-encoder">Keypad and encoder</a><ul>
<li class="toctree-l4"><a class="reference internal" href="indev.html#groups">Groups</a></li>
<li class="toctree-l4"><a class="reference internal" href="indev.html#styling">Styling</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="indev.html#api">API</a><ul>
<li class="toctree-l4"><a class="reference internal" href="indev.html#input-device">Input device</a></li>
<li class="toctree-l4"><a class="reference internal" href="indev.html#id1">Groups</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="display.html">Displays</a><ul>
<li class="toctree-l3"><a class="reference internal" href="display.html#multiple-display-support">Multiple display support</a><ul>
<li class="toctree-l4"><a class="reference internal" href="display.html#using-only-one-display">Using only one display</a></li>
<li class="toctree-l4"><a class="reference internal" href="display.html#mirror-display">Mirror display</a></li>
<li class="toctree-l4"><a class="reference internal" href="display.html#split-image">Split image</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="display.html#screens">Screens</a><ul>
<li class="toctree-l4"><a class="reference internal" href="display.html#transparent-screens">Transparent screens</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="display.html#features-of-displays">Features of displays</a><ul>
<li class="toctree-l4"><a class="reference internal" href="display.html#inactivity">Inactivity</a></li>
<li class="toctree-l4"><a class="reference internal" href="display.html#background">Background</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="display.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="color.html">Colors</a><ul>
<li class="toctree-l3"><a class="reference internal" href="color.html#creating-colors">Creating colors</a><ul>
<li class="toctree-l4"><a class="reference internal" href="color.html#rgb">RGB</a></li>
<li class="toctree-l4"><a class="reference internal" href="color.html#hsv">HSV</a></li>
<li class="toctree-l4"><a class="reference internal" href="color.html#palette">Palette</a></li>
<li class="toctree-l4"><a class="reference internal" href="color.html#modify-and-mix-colors">Modify and mix colors</a></li>
<li class="toctree-l4"><a class="reference internal" href="color.html#built-in-colors">Built-in colors</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="color.html#opacity">Opacity</a></li>
<li class="toctree-l3"><a class="reference internal" href="color.html#color-types">Color types</a><ul>
<li class="toctree-l4"><a class="reference internal" href="color.html#convert-color">Convert color</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="color.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="font.html">Fonts</a><ul>
<li class="toctree-l3"><a class="reference internal" href="font.html#unicode-support">Unicode support</a></li>
<li class="toctree-l3"><a class="reference internal" href="font.html#built-in-fonts">Built-in fonts</a><ul>
<li class="toctree-l4"><a class="reference internal" href="font.html#normal-fonts">Normal fonts</a></li>
<li class="toctree-l4"><a class="reference internal" href="font.html#special-fonts">Special fonts</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="font.html#special-features">Special features</a><ul>
<li class="toctree-l4"><a class="reference internal" href="font.html#bidirectional-support">Bidirectional support</a></li>
<li class="toctree-l4"><a class="reference internal" href="font.html#arabic-and-persian-support">Arabic and Persian support</a></li>
<li class="toctree-l4"><a class="reference internal" href="font.html#subpixel-rendering">Subpixel rendering</a></li>
<li class="toctree-l4"><a class="reference internal" href="font.html#compress-fonts">Compress fonts</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="font.html#add-new-font">Add new font</a></li>
<li class="toctree-l3"><a class="reference internal" href="font.html#add-new-symbols">Add new symbols</a></li>
<li class="toctree-l3"><a class="reference internal" href="font.html#load-font-at-run-time">Load font at run-time</a></li>
<li class="toctree-l3"><a class="reference internal" href="font.html#add-a-new-font-engine">Add a new font engine</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="image.html">Images</a><ul>
<li class="toctree-l3"><a class="reference internal" href="image.html#store-images">Store images</a><ul>
<li class="toctree-l4"><a class="reference internal" href="image.html#variables">Variables</a></li>
<li class="toctree-l4"><a class="reference internal" href="image.html#files">Files</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="image.html#color-formats">Color formats</a></li>
<li class="toctree-l3"><a class="reference internal" href="image.html#add-and-use-images">Add and use images</a><ul>
<li class="toctree-l4"><a class="reference internal" href="image.html#online-converter">Online converter</a></li>
<li class="toctree-l4"><a class="reference internal" href="image.html#manually-create-an-image">Manually create an image</a></li>
<li class="toctree-l4"><a class="reference internal" href="image.html#use-images">Use images</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="image.html#image-decoder">Image decoder</a><ul>
<li class="toctree-l4"><a class="reference internal" href="image.html#custom-image-formats">Custom image formats</a></li>
<li class="toctree-l4"><a class="reference internal" href="image.html#register-an-image-decoder">Register an image decoder</a></li>
<li class="toctree-l4"><a class="reference internal" href="image.html#manually-use-an-image-decoder">Manually use an image decoder</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="image.html#image-caching">Image caching</a><ul>
<li class="toctree-l4"><a class="reference internal" href="image.html#cache-size">Cache size</a></li>
<li class="toctree-l4"><a class="reference internal" href="image.html#value-of-images">Value of images</a></li>
<li class="toctree-l4"><a class="reference internal" href="image.html#memory-usage">Memory usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="image.html#clean-the-cache">Clean the cache</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="image.html#api">API</a><ul>
<li class="toctree-l4"><a class="reference internal" href="image.html#image-buffer">Image buffer</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="file-system.html">File system</a><ul>
<li class="toctree-l3"><a class="reference internal" href="file-system.html#ready-to-use-drivers">Ready to use drivers</a></li>
<li class="toctree-l3"><a class="reference internal" href="file-system.html#add-a-driver">Add a driver</a><ul>
<li class="toctree-l4"><a class="reference internal" href="file-system.html#registering-a-driver">Registering a driver</a></li>
<li class="toctree-l4"><a class="reference internal" href="file-system.html#implementing-the-callbacks">Implementing the callbacks</a></li>
<li class="toctree-l4"><a class="reference internal" href="file-system.html#other-callbacks">Other callbacks</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="file-system.html#usage-example">Usage example</a></li>
<li class="toctree-l3"><a class="reference internal" href="file-system.html#use-drivers-for-images">Use drivers for images</a></li>
<li class="toctree-l3"><a class="reference internal" href="file-system.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="animation.html">Animations</a><ul>
<li class="toctree-l3"><a class="reference internal" href="animation.html#create-an-animation">Create an animation</a></li>
<li class="toctree-l3"><a class="reference internal" href="animation.html#animation-path">Animation path</a></li>
<li class="toctree-l3"><a class="reference internal" href="animation.html#speed-vs-time">Speed vs time</a></li>
<li class="toctree-l3"><a class="reference internal" href="animation.html#delete-animations">Delete animations</a></li>
<li class="toctree-l3"><a class="reference internal" href="animation.html#examples">Examples</a><ul>
<li class="toctree-l4"><a class="reference internal" href="animation.html#c">C</a></li>
<li class="toctree-l4"><a class="reference internal" href="animation.html#micropython">MicroPython</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="animation.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="timer.html">Timers</a><ul>
<li class="toctree-l3"><a class="reference internal" href="timer.html#create-a-timer">Create a timer</a></li>
<li class="toctree-l3"><a class="reference internal" href="timer.html#ready-and-reset">Ready and Reset</a></li>
<li class="toctree-l3"><a class="reference internal" href="timer.html#set-parameters">Set parameters</a></li>
<li class="toctree-l3"><a class="reference internal" href="timer.html#repeat-count">Repeat count</a></li>
<li class="toctree-l3"><a class="reference internal" href="timer.html#measure-idle-time">Measure idle time</a></li>
<li class="toctree-l3"><a class="reference internal" href="timer.html#asynchronous-calls">Asynchronous calls</a></li>
<li class="toctree-l3"><a class="reference internal" href="timer.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="drawing.html">Drawing</a><ul>
<li class="toctree-l3"><a class="reference internal" href="drawing.html#mechanism-of-screen-refreshing">Mechanism of screen refreshing</a></li>
<li class="toctree-l3"><a class="reference internal" href="drawing.html#masking">Masking</a></li>
<li class="toctree-l3"><a class="reference internal" href="drawing.html#hook-drawing">Hook drawing</a><ul>
<li class="toctree-l4"><a class="reference internal" href="drawing.html#main-drawing">Main drawing</a></li>
<li class="toctree-l4"><a class="reference internal" href="drawing.html#post-drawing">Post drawing</a></li>
<li class="toctree-l4"><a class="reference internal" href="drawing.html#part-drawing">Part drawing</a></li>
<li class="toctree-l4"><a class="reference internal" href="drawing.html#others">Others</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="new_widget.html">New widget</a></li>
</ul>
</li>
<li class="toctree-l1"><a class="reference internal" href="../widgets/index.html">Widgets</a><ul>
<li class="toctree-l2"><a class="reference internal" href="../widgets/obj.html">Base object (lv_obj)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../widgets/obj.html#overview">Overview</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/obj.html#coordinates">Coordinates</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/obj.html#parents-and-children">Parents and children</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/obj.html#screens">Screens</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/obj.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/obj.html#styles">Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/obj.html#flags">Flags</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/obj.html#groups">Groups</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/obj.html#extended-click-area">Extended click area</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/obj.html#id1">Events</a></li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/obj.html#keys">Keys</a></li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/obj.html#example">Example</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/obj.html#c">C</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/obj.html#micropython">MicroPython</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/obj.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../widgets/core/index.html">Core widgets</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../widgets/core/arc.html">Arc (lv_arc)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/arc.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/arc.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/arc.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/arc.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/arc.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/arc.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/arc.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/core/bar.html">Bar (lv_bar)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/bar.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/bar.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/bar.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/bar.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/bar.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/bar.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/bar.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/core/btn.html">Button (lv_btn)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/btn.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/btn.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/btn.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/btn.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/btn.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/btn.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/btn.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/core/btnmatrix.html">Button matrix (lv_btnmatrix)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/btnmatrix.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/btnmatrix.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/btnmatrix.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/btnmatrix.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/btnmatrix.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/btnmatrix.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/btnmatrix.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/core/canvas.html">Canvas (lv_canvas)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/canvas.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/canvas.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/canvas.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/canvas.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/canvas.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/canvas.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/canvas.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/core/checkbox.html">Checkbox (lv_checkbox)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/checkbox.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/checkbox.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/checkbox.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/checkbox.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/checkbox.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/checkbox.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/checkbox.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/core/dropdown.html">Drop-down list (lv_dropdown)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/dropdown.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/dropdown.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/dropdown.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/dropdown.html#id1">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/dropdown.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/dropdown.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/dropdown.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/dropdown.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/core/img.html">Image (lv_img)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/img.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/img.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/img.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/img.html#transformations">Transformations</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/img.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/img.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/img.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/img.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/core/label.html">Label (lv_label)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/label.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/label.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/label.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/label.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/label.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/label.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/label.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/core/line.html">Line (lv_line)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/line.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/line.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/line.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/line.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/line.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/line.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/line.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/core/roller.html">Roller (lv_roller)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/roller.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/roller.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/roller.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/roller.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/roller.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/roller.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/roller.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/core/slider.html">Slider (lv_slider)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/slider.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/slider.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/slider.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/slider.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/slider.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/slider.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/slider.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/core/switch.html">Switch (lv_switch)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/switch.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/switch.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/switch.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/switch.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/switch.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/switch.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/switch.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/core/table.html">Table (lv_table)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/table.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/table.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/table.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/table.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/table.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/table.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/table.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/core/textarea.html">Text area (lv_textarea)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/textarea.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/textarea.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/textarea.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/textarea.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/textarea.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/textarea.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/textarea.html#api">API</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../widgets/extra/index.html">Extra widgets</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../widgets/extra/calendar.html">Calendar (lv_calendar)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/calendar.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/calendar.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/calendar.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/calendar.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/calendar.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/calendar.html#headers">Headers</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/calendar.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/calendar.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/extra/chart.html">Chart (lv_chart)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/chart.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/chart.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/chart.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/chart.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/chart.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/chart.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/chart.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/extra/colorwheel.html">Color wheel (lv_colorwheel)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/colorwheel.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/colorwheel.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/colorwheel.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/colorwheel.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/colorwheel.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/colorwheel.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/colorwheel.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/extra/imgbtn.html">Image button (lv_imgbtn)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/imgbtn.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/imgbtn.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/imgbtn.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/imgbtn.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/imgbtn.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/imgbtn.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/imgbtn.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/extra/keyboard.html">Keyboard (lv_keyboard)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/keyboard.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/keyboard.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/keyboard.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/keyboard.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/keyboard.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/keyboard.html#examples">Examples</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/keyboard.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/extra/led.html">LED (lv_led)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/led.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/led.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/led.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/led.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/led.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/led.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/led.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/extra/list.html">List (lv_list)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/list.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/list.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/list.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/list.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/list.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/list.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/list.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/extra/meter.html">Meter (lv_meter)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/meter.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/meter.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/meter.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/meter.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/meter.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/meter.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/meter.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/extra/msgbox.html">Message box (lv_msgbox)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/msgbox.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/msgbox.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/msgbox.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/msgbox.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/msgbox.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/msgbox.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/msgbox.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/extra/span.html">Span (lv_span)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/span.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/span.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/span.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/span.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/span.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/span.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/span.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/extra/spinbox.html">Spinbox (lv_spinbox)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/spinbox.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/spinbox.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/spinbox.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/spinbox.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/spinbox.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/spinbox.html#api">API</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/spinbox.html#id1">Example</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/extra/spinner.html">Spinner (lv_spinner)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/spinner.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/spinner.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/spinner.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/spinner.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/spinner.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/spinner.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/spinner.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/extra/tabview.html">Tabview (lv_tabview)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/tabview.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/tabview.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/tabview.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/tabview.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/tabview.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/tabview.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/tabview.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/extra/tileview.html">Tile view (lv_tileview)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/tileview.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/tileview.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/tileview.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/tileview.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/tileview.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/tileview.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/tileview.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/extra/win.html">Window (lv_win)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/win.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/win.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/win.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/win.html#get-the-parts">Get the parts</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/win.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/win.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/win.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/win.html#api">API</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l1"><a class="reference internal" href="../layouts/index.html">Layouts</a><ul>
<li class="toctree-l2"><a class="reference internal" href="../layouts/flex.html">Flex</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../layouts/flex.html#overview">Overview</a></li>
<li class="toctree-l3"><a class="reference internal" href="../layouts/flex.html#terms">Terms</a></li>
<li class="toctree-l3"><a class="reference internal" href="../layouts/flex.html#simple-interface">Simple interface</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../layouts/flex.html#flex-flow">Flex flow</a></li>
<li class="toctree-l4"><a class="reference internal" href="../layouts/flex.html#flex-align">Flex align</a></li>
<li class="toctree-l4"><a class="reference internal" href="../layouts/flex.html#flex-grow">Flex grow</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../layouts/flex.html#style-interface">Style interface</a></li>
<li class="toctree-l3"><a class="reference internal" href="../layouts/flex.html#other-features">Other features</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../layouts/flex.html#rtl">RTL</a></li>
<li class="toctree-l4"><a class="reference internal" href="../layouts/flex.html#new-track">New track</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../layouts/flex.html#example">Example</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../layouts/flex.html#c">C</a></li>
<li class="toctree-l4"><a class="reference internal" href="../layouts/flex.html#micropython">MicroPython</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../layouts/flex.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../layouts/grid.html">Grid</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../layouts/grid.html#overview">Overview</a></li>
<li class="toctree-l3"><a class="reference internal" href="../layouts/grid.html#terms">Terms</a></li>
<li class="toctree-l3"><a class="reference internal" href="../layouts/grid.html#simple-interface">Simple interface</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../layouts/grid.html#grid-descriptors">Grid descriptors</a></li>
<li class="toctree-l4"><a class="reference internal" href="../layouts/grid.html#grid-items">Grid items</a></li>
<li class="toctree-l4"><a class="reference internal" href="../layouts/grid.html#grid-align">Grid align</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../layouts/grid.html#style-interface">Style interface</a></li>
<li class="toctree-l3"><a class="reference internal" href="../layouts/grid.html#other-features">Other features</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../layouts/grid.html#rtl">RTL</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../layouts/grid.html#example">Example</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../layouts/grid.html#c">C</a></li>
<li class="toctree-l4"><a class="reference internal" href="../layouts/grid.html#micropython">MicroPython</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../layouts/grid.html#api">API</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l1"><a class="reference internal" href="../CONTRIBUTING.html">Contributing</a><ul>
<li class="toctree-l2"><a class="reference internal" href="../CONTRIBUTING.html#introduction">Introduction</a></li>
<li class="toctree-l2"><a class="reference internal" href="../CONTRIBUTING.html#pull-request">Pull request</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../CONTRIBUTING.html#from-github">From GitHub</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CONTRIBUTING.html#from-command-line">From command line</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../CONTRIBUTING.html#developer-certification-of-origin-dco">Developer Certification of Origin (DCO)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../CONTRIBUTING.html#overview">Overview</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CONTRIBUTING.html#accepted-licenses-and-copyright-notices">Accepted licenses and copyright notices</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../CONTRIBUTING.html#your-own-work">Your own work</a></li>
<li class="toctree-l4"><a class="reference internal" href="../CONTRIBUTING.html#use-code-from-online-source">Use code from online source</a></li>
<li class="toctree-l4"><a class="reference internal" href="../CONTRIBUTING.html#use-mit-licensed-code">Use MIT licensed code</a></li>
<li class="toctree-l4"><a class="reference internal" href="../CONTRIBUTING.html#use-gpl-licensed-code">Use GPL licensed code</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../CONTRIBUTING.html#ways-to-contribute">Ways to contribute</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../CONTRIBUTING.html#give-lvgl-a-star">Give LVGL a Star</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CONTRIBUTING.html#tell-what-you-have-achieved">Tell what you have achieved</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CONTRIBUTING.html#write-examples">Write examples</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CONTRIBUTING.html#improve-the-docs">Improve the docs</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CONTRIBUTING.html#report-bugs">Report bugs</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CONTRIBUTING.html#send-fixes">Send fixes</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CONTRIBUTING.html#join-the-conversations-in-the-forum">Join the conversations in the Forum</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CONTRIBUTING.html#add-features">Add features</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CONTRIBUTING.html#become-a-maintainer">Become a maintainer</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CONTRIBUTING.html#move-your-project-repository-under-lvgl-organization">Move your project repository under LVGL organization</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l1"><a class="reference internal" href="../CHANGELOG.html">Changelog</a><ul>
<li class="toctree-l2"><a class="reference internal" href="../CHANGELOG.html#v8-0-2-16-07-2021">v8.0.2 (16.07.2021)</a></li>
<li class="toctree-l2"><a class="reference internal" href="../CHANGELOG.html#v8-0-1-14-06-2021">v8.0.1 (14.06.2021)</a></li>
<li class="toctree-l2"><a class="reference internal" href="../CHANGELOG.html#v8-0-0-01-06-2021">v8.0.0 (01.06.2021)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#directory-structure">Directory structure</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#widget-changes">Widget changes</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#new-scrolling">New scrolling</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#new-layouts">New layouts</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#styles">Styles</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#events">Events</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#driver-changes">Driver changes</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#other-changes">Other changes</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#new-release-policy">New release policy</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#migrating-from-v7-to-v8">Migrating from v7 to v8</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../CHANGELOG.html#v7-11-0-16-03-2021">v7.11.0 (16.03.2021)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#new-features">New features</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#bugfixes">Bugfixes</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../CHANGELOG.html#v7-10-1-16-02-2021">v7.10.1 (16.02.2021)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#id1">Bugfixes</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../CHANGELOG.html#v7-10-0-02-02-2021">v7.10.0 (02.02.2021)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#id2">New features</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#id3">Bugfixes</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../CHANGELOG.html#v7-9-1-19-01-2021">v7.9.1 (19.01.2021)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#id4">Bugfixes</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../CHANGELOG.html#v7-9-0-05-01-2021">v7.9.0 (05.01.2021)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#id5">New features</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#id6">Bugfixes</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../CHANGELOG.html#v7-8-1-15-12-2020">v7.8.1 (15.12.2020)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#id7">Bugfixes</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../CHANGELOG.html#v7-8-0-01-12-2020">v7.8.0 (01.12.2020)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#id8">New features</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#id9">Bugfixes</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../CHANGELOG.html#v7-7-2-17-11-2020">v7.7.2 (17.11.2020)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#id10">Bugfixes</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../CHANGELOG.html#v7-7-1-03-11-2020">v7.7.1 (03.11.2020)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#id11">Bugfixes</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../CHANGELOG.html#v7-7-0-20-10-2020">v7.7.0 (20.10.2020)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#id12">New features</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#id13">Bugfixes</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../CHANGELOG.html#v7-6-1-06-10-2020">v7.6.1 (06.10.2020)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#id14">Bugfixes</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../CHANGELOG.html#v7-6-0-22-09-2020">v7.6.0 (22.09.2020)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#id15">New features</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#id16">Bugfixes</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../CHANGELOG.html#v7-5-0-15-09-2020">v7.5.0 (15.09.2020)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#id17">New features</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#id18">Bugfixes</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../CHANGELOG.html#v7-4-0-01-09-2020">v7.4.0 (01.09.2020)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#id19">New features</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#id20">Bugfixes</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../CHANGELOG.html#v7-3-1-18-08-2020">v7.3.1 (18.08.2020)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#id21">Bugfixes</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../CHANGELOG.html#v7-3-0-04-08-2020">v7.3.0 (04.08.2020)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#id22">New features</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#id23">Bugfixes</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../CHANGELOG.html#v7-2-0-21-07-2020">v7.2.0 (21.07.2020)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#id24">New features</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#id25">Bugfixes</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../CHANGELOG.html#v7-1-0-07-07-2020">v7.1.0 (07.07.2020)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#id26">New features</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#id27">Bugfixes</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../CHANGELOG.html#v7-0-2-16-06-2020">v7.0.2 (16.06.2020)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#id28">Bugfixes</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../CHANGELOG.html#v7-0-1-01-06-2020">v7.0.1 (01.06.2020)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#id29">Bugfixes</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../CHANGELOG.html#v7-0-0-18-05-2020">v7.0.0 (18.05.2020)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#documentation">Documentation</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#legal-changes">Legal changes</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#new-drawing-system">New drawing system</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#new-style-system">New style system</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#gpu-integration">GPU integration</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#renames">Renames</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#reworked-and-improved-object">Reworked and improved object</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#new-object-types">New object types</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#others">Others</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#demos">Demos</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#id30">New release policy</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#migrating-from-v6-to-v7">Migrating from v6 to v7</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l1"><a class="reference internal" href="../ROADMAP.html">Roadmap</a><ul>
<li class="toctree-l2"><a class="reference internal" href="../ROADMAP.html#v8-x">v8.X</a></li>
<li class="toctree-l2"><a class="reference internal" href="../ROADMAP.html#ideas">Ideas</a></li>
<li class="toctree-l2"><a class="reference internal" href="../ROADMAP.html#v8">v8</a></li>
</ul>
</li>
</ul>

            
          
        </div>
        
      </div>
    </nav>

    <section data-toggle="wy-nav-shift" class="wy-nav-content-wrap">

      
      <nav class="wy-nav-top" aria-label="top navigation">
        
          <i data-toggle="wy-nav-top" class="fa fa-bars"></i>
          <a href="../index.html">LVGL</a>
        
      </nav>


      <div class="wy-nav-content">
        
        <div class="rst-content">
        
          



















<div role="navigation" aria-label="breadcrumbs navigation">

  <ul class="wy-breadcrumbs">
    
      <li><a href="../index.html" class="icon icon-home"></a> &raquo;</li>
        
          <li><a href="index.html">Overview</a> &raquo;</li>
        
      <li>Scroll</li>
    
    
      <li class="wy-breadcrumbs-aside">
        
          
            
              <!-- User defined GitHub URL -->
              <a href="https://github.com/lvgl/lvgl/blob/5d0ba633a5dc8bb1c3e3714461b6839f205a69fa/docs/overview/scroll.md" class="fa fa-github"> Edit on GitHub</a>
            
          
        
      </li>
    
  </ul>

  
  <hr/>
</div>
          <div role="main" class="document" itemscope="itemscope" itemtype="http://schema.org/Article">
           <div itemprop="articleBody">
            
  <div class="section" id="scroll">
<h1>Scroll<a class="headerlink" href="#scroll" title="Permalink to this headline">¶</a></h1>
<div class="section" id="overview">
<h2>Overview<a class="headerlink" href="#overview" title="Permalink to this headline">¶</a></h2>
<p>In LVGL scrolling works very intuitively: if an object is out of its parent content area (the size without paddings), the parent becomes scrollable and scrollbar(s) will appear. That's it.</p>
<p>Any object can be scrollable including <code class="docutils literal notranslate"><span class="pre">lv_obj_t</span></code>, <code class="docutils literal notranslate"><span class="pre">lv_img</span></code>, <code class="docutils literal notranslate"><span class="pre">lv_btn</span></code>, <code class="docutils literal notranslate"><span class="pre">lv_meter</span></code>, etc</p>
<p>The object can either be scrolled either horizontally or vertically in one stroke; diagonal scrolling is not possible.</p>
<div class="section" id="scrollbar">
<h3>Scrollbar<a class="headerlink" href="#scrollbar" title="Permalink to this headline">¶</a></h3>
<div class="section" id="mode">
<h4>Mode<a class="headerlink" href="#mode" title="Permalink to this headline">¶</a></h4>
<p>The scrollbars are displayed according to the set <code class="docutils literal notranslate"><span class="pre">mode</span></code>. The following <code class="docutils literal notranslate"><span class="pre">mode</span></code>s exist:</p>
<ul class="simple">
<li><p><code class="docutils literal notranslate"><span class="pre">LV_SCROLLBAR_MODE_OFF</span></code>  Never show the scrollbars</p></li>
<li><p><code class="docutils literal notranslate"><span class="pre">LV_SCROLLBAR_MODE_ON</span></code>  Always show the scrollbars</p></li>
<li><p><code class="docutils literal notranslate"><span class="pre">LV_SCROLLBAR_MODE_ACTIVE</span></code> Show scroll bars while object is being scrolled</p></li>
<li><p><code class="docutils literal notranslate"><span class="pre">LV_SCROLLBAR_MODE_AUTO</span></code>  Show scroll bars when the content is large enough to be scrolled</p></li>
</ul>
<p><code class="docutils literal notranslate"><span class="pre">lv_obj_set_scrollbar_mode(obj,</span> <span class="pre">LV_SCROLLBAR_MODE_...)</span></code> set the scrollbar mode on an object.</p>
</div>
<div class="section" id="styling">
<h4>Styling<a class="headerlink" href="#styling" title="Permalink to this headline">¶</a></h4>
<p>The scrollbars have their own dedicated part, called <code class="docutils literal notranslate"><span class="pre">LV_PART_SCROLLBAR</span></code>. For example a scrollbar can turned to red like this:</p>
<div class="highlight-c notranslate"><div class="highlight"><pre><span></span><span class="k">static</span> <span class="n">lv_style_t</span> <span class="n">style_red</span><span class="p">;</span>
<span class="n">lv_style_init</span><span class="p">(</span><span class="o">&amp;</span><span class="n">style_red</span><span class="p">);</span>
<span class="n">lv_style_set_bg_color</span><span class="p">(</span><span class="o">&amp;</span><span class="n">style_red</span><span class="p">,</span> <span class="n">lv_color_red</span><span class="p">());</span>

<span class="p">...</span>

<span class="n">lv_obj_add_style</span><span class="p">(</span><span class="n">obj</span><span class="p">,</span> <span class="o">&amp;</span><span class="n">style_red</span><span class="p">,</span> <span class="n">LV_PART_SCROLLBAR</span><span class="p">);</span>
</pre></div>
</div>
<p>The object goes to <code class="docutils literal notranslate"><span class="pre">LV_STATE_SCROLLED</span></code> state while it's being scrolled. It allows adding different style to the scrollbar or the object itself when scrolled.
This code makes the scrollbar blue when the object is scrolled:</p>
<div class="highlight-c notranslate"><div class="highlight"><pre><span></span><span class="k">static</span> <span class="n">lv_style_t</span> <span class="n">style_blue</span><span class="p">;</span>
<span class="n">lv_style_init</span><span class="p">(</span><span class="o">&amp;</span><span class="n">style_blue</span><span class="p">);</span>
<span class="n">lv_style_set_bg_color</span><span class="p">(</span><span class="o">&amp;</span><span class="n">style_red</span><span class="p">,</span> <span class="n">lv_color_blue</span><span class="p">());</span>

<span class="p">...</span>

<span class="n">lv_obj_add_style</span><span class="p">(</span><span class="n">obj</span><span class="p">,</span> <span class="o">&amp;</span><span class="n">style_blue</span><span class="p">,</span> <span class="n">LV_STATE_SCROLLED</span> <span class="o">|</span> <span class="n">LV_PART_SCROLLBAR</span><span class="p">);</span>
</pre></div>
</div>
</div>
</div>
<div class="section" id="events">
<h3>Events<a class="headerlink" href="#events" title="Permalink to this headline">¶</a></h3>
<p>The following events are related to scrolling:</p>
<ul class="simple">
<li><p><code class="docutils literal notranslate"><span class="pre">LV_EVENT_SCROLL_BEGIN</span></code> Scrolling begins</p></li>
<li><p><code class="docutils literal notranslate"><span class="pre">LV_EVENT_SCROLL_END</span></code> Scrolling ends</p></li>
<li><p><code class="docutils literal notranslate"><span class="pre">LV_EVENT_SCROLL</span></code> Scroll happened. Triggered on every position change.
Scroll events</p></li>
</ul>
</div>
</div>
<div class="section" id="basic-example">
<h2>Basic example<a class="headerlink" href="#basic-example" title="Permalink to this headline">¶</a></h2>
<p>TODO</p>
</div>
<div class="section" id="features-of-scrolling">
<h2>Features of scrolling<a class="headerlink" href="#features-of-scrolling" title="Permalink to this headline">¶</a></h2>
<p>Besides managing &quot;normal&quot; scrolling there are many interesting and useful additional features too.</p>
<div class="section" id="scrollable">
<h3>Scrollable<a class="headerlink" href="#scrollable" title="Permalink to this headline">¶</a></h3>
<p>It's possible to make an object non-scrollable with <code class="docutils literal notranslate"><span class="pre">lv_obj_clear_flag(obj,</span> <span class="pre">LV_OBJ_FLAG_SCROLLABLE)</span></code>.</p>
<p>Non-scrollable object can still propagate the scrolling (chain) to the parents.</p>
<p>The direction in which scrolling can happen can be controlled by <code class="docutils literal notranslate"><span class="pre">lv_obj_set_scroll_dir(obj,</span> <span class="pre">LV_DIR_...)</span></code>.
The following values are possible for the direction:</p>
<ul class="simple">
<li><p><code class="docutils literal notranslate"><span class="pre">LV_DIR_TOP</span></code> only scroll up</p></li>
<li><p><code class="docutils literal notranslate"><span class="pre">LV_DIR_LEFT</span></code> only scroll left</p></li>
<li><p><code class="docutils literal notranslate"><span class="pre">LV_DIR_BOTTOM</span></code> only scroll down</p></li>
<li><p><code class="docutils literal notranslate"><span class="pre">LV_DIR_RIGHT</span></code> only scroll right</p></li>
<li><p><code class="docutils literal notranslate"><span class="pre">LV_DIR_HOR</span></code> only scroll horizontally</p></li>
<li><p><code class="docutils literal notranslate"><span class="pre">LV_DIR_TOP</span></code> only scroll vertically</p></li>
<li><p><code class="docutils literal notranslate"><span class="pre">LV_DIR_ALL</span></code> scroll any directions</p></li>
</ul>
<p>OR-ed values are also possible. E.g. <code class="docutils literal notranslate"><span class="pre">LV_DIR_TOP</span> <span class="pre">|</span> <span class="pre">LV_DIR_LEFT</span></code>.</p>
</div>
<div class="section" id="scroll-chain">
<h3>Scroll chain<a class="headerlink" href="#scroll-chain" title="Permalink to this headline">¶</a></h3>
<p>If an object can't be scrolled further (e.g. it's content has reached the bottom most position) the scrolling is propagated to it's parent. If the parent an be scrolled in that direction than it will be scrolled instead.
It propagets to the grandparent and grand-grandparents too.</p>
<p>The propagation on scrolling is called &quot;scroll chaining&quot; and it can be enabled/disabled with the <code class="docutils literal notranslate"><span class="pre">LV_OBJ_FLAG_SCROLL_CHAIN</span></code> flag.
If chaining is disabled the propagation stops on the object and the parent(s) won't be scrolled.</p>
</div>
<div class="section" id="scroll-momentum">
<h3>Scroll momentum<a class="headerlink" href="#scroll-momentum" title="Permalink to this headline">¶</a></h3>
<p>When the user scrolls an object and releases it, LVGL can emulate a momentum for the scrolling. It's like the object was thrown and scrolling slows down smoothly.</p>
<p>The scroll momentum can be enabled/disabled with the <code class="docutils literal notranslate"><span class="pre">LV_OBJ_FLAG_SCROLL_MOMENTUM</span></code> flag.</p>
</div>
<div class="section" id="elastic-scroll">
<h3>Elastic scroll<a class="headerlink" href="#elastic-scroll" title="Permalink to this headline">¶</a></h3>
<p>Normally the content can't be scrolled inside the object. That is the top side of the content can't be below the top side of the object.</p>
<p>However, with <code class="docutils literal notranslate"><span class="pre">LV_OBJ_FLAG_SCROLL_ELASTIC</span></code> a fancy effect can be added when the user &quot;over-scrolls&quot; the content. The scrolling slows down, and the content can be scrolled inside the object.
When the object is released the content scrolled in it will be animated back to the valid position.</p>
</div>
<div class="section" id="snapping">
<h3>Snapping<a class="headerlink" href="#snapping" title="Permalink to this headline">¶</a></h3>
<p>The children of an object can be snapped according to specific rules when scrolling ends. Children can be made snappable individually with the <code class="docutils literal notranslate"><span class="pre">LV_OBJ_FLAG_SNAPABLE</span></code> flag. (Note misspelling of the flag name: your code needs to spell it with one P.)
The object can align the snapped children in 4 ways:</p>
<ul class="simple">
<li><p><code class="docutils literal notranslate"><span class="pre">LV_SCROLL_SNAP_NONE</span></code> Snapping is disabled. (default)</p></li>
<li><p><code class="docutils literal notranslate"><span class="pre">LV_SCROLL_SNAP_START</span></code> Align the children to the left/top side of the scrolled object</p></li>
<li><p><code class="docutils literal notranslate"><span class="pre">LV_SCROLL_SNAP_END</span></code> Align the children to the right/bottom side of the scrolled object</p></li>
<li><p><code class="docutils literal notranslate"><span class="pre">LV_SCROLL_SNAP_CENTER</span></code> Align the children to the center of the scrolled object</p></li>
</ul>
<p>The alignment can be set with <code class="docutils literal notranslate"><span class="pre">lv_obj_set_scroll_snap_x/y(obj,</span> <span class="pre">LV_SCROLL_SNAP_...)</span></code>:</p>
<p>Under the hood the following happens:</p>
<ol class="simple">
<li><p>User scrolls an object and releases the screen</p></li>
<li><p>LVGL calculates where the scroll would end considering scroll momentum</p></li>
<li><p>LVGL finds the nearest scroll point</p></li>
<li><p>LVGL scrolls to the snap point with an animation</p></li>
</ol>
</div>
<div class="section" id="scroll-one">
<h3>Scroll one<a class="headerlink" href="#scroll-one" title="Permalink to this headline">¶</a></h3>
<p>The &quot;scroll one&quot; feature tells LVGL to allow scrolling only one snappable child at a time.
So this requires to make the children snappable (LV_OBJ_FLAG_SNAPABLE spelled with one P in code) and and set a scroll snap alignment different from <code class="docutils literal notranslate"><span class="pre">LV_SCROLL_SNAP_NONE</span></code>.</p>
<p>This feature can be enabled by the <code class="docutils literal notranslate"><span class="pre">LV_OBJ_FLAG_SCROLL_ONE</span></code> flag.</p>
</div>
<div class="section" id="scroll-on-focus">
<h3>Scroll on focus<a class="headerlink" href="#scroll-on-focus" title="Permalink to this headline">¶</a></h3>
<p>Imagine that there a lot of objects in a group that are on scrollable object. Pressing the &quot;Tab&quot; button focuses the next object but it might be out of the visible area of the scrollable object.
If the &quot;scroll on focus&quot; features is enabled LVGL will automatically scroll to the objects to bring the children into the view.
The scrolling happens recursively therefore even nested scrollable object are handled properly.
The object will be scrolled to the view even if it's on a different page of a tabview.</p>
</div>
</div>
<div class="section" id="scroll-manually">
<h2>Scroll manually<a class="headerlink" href="#scroll-manually" title="Permalink to this headline">¶</a></h2>
<p>The following API functions allow to manually scroll objects:</p>
<ul class="simple">
<li><p><code class="docutils literal notranslate"><span class="pre">lv_obj_scroll_by(obj,</span> <span class="pre">x,</span> <span class="pre">y,</span> <span class="pre">LV_ANIM_ON/OFF)</span></code> scroll by <code class="docutils literal notranslate"><span class="pre">x</span></code> and <code class="docutils literal notranslate"><span class="pre">y</span></code> values</p></li>
<li><p><code class="docutils literal notranslate"><span class="pre">lv_obj_scroll_to(obj,</span> <span class="pre">x,</span> <span class="pre">y,</span> <span class="pre">LV_ANIM_ON/OFF)</span></code> scroll to bring the given coordinate to the top left corner</p></li>
<li><p><code class="docutils literal notranslate"><span class="pre">lv_obj_scroll_to_x(obj,</span> <span class="pre">x,</span> <span class="pre">LV_ANIM_ON/OFF)</span></code> scroll to bring the given coordinate to the left side</p></li>
<li><p><code class="docutils literal notranslate"><span class="pre">lv_obj_scroll_to_y(obj,</span> <span class="pre">y,</span> <span class="pre">LV_ANIM_ON/OFF)</span></code> scroll to bring the given coordinate to the left side</p></li>
</ul>
</div>
<div class="section" id="self-size">
<h2>Self size<a class="headerlink" href="#self-size" title="Permalink to this headline">¶</a></h2>
<p>Self size is a property of an object. Normally, the user shouldn't use this parameter but if a custom widget is created it might be useful.</p>
<p>In short, self size tell the size of the content. To understand it better take the example of a table.
Let's say it has 10 rows each with 50 px height. So the total height of the content is 500 px. In other words the &quot;self height&quot; is 500 px.
If the user sets only 200 px height for the table LVGL will see that the self size is larger and make the table scrollable.</p>
<p>It means not only the children can make an object scrollable but a larger self size too.</p>
<p>LVGL uses the <code class="docutils literal notranslate"><span class="pre">LV_EVENT_GET_SELF_SIZE</span></code> event to get the self size of an object. Here is an example to see how to handle the event</p>
<div class="highlight-c notranslate"><div class="highlight"><pre><span></span><span class="k">if</span><span class="p">(</span><span class="n">event_code</span> <span class="o">==</span> <span class="n">LV_EVENT_GET_SELF_SIZE</span><span class="p">)</span> <span class="p">{</span>
	<span class="n">lv_point_t</span> <span class="o">*</span> <span class="n">p</span> <span class="o">=</span> <span class="n">lv_event_get_param</span><span class="p">(</span><span class="n">e</span><span class="p">);</span>
  
  <span class="c1">//If x or y &lt; 0 then it doesn&#39;t neesd to be calculated now</span>
  <span class="k">if</span><span class="p">(</span><span class="n">p</span><span class="o">-&gt;</span><span class="n">x</span> <span class="o">&gt;=</span> <span class="mi">0</span><span class="p">)</span> <span class="p">{</span>
    <span class="n">p</span><span class="o">-&gt;</span><span class="n">x</span> <span class="o">=</span> <span class="mi">200</span><span class="p">;</span>	<span class="c1">//Set or calculate the self width</span>
  <span class="p">}</span>
  
  <span class="k">if</span><span class="p">(</span><span class="n">p</span><span class="o">-&gt;</span><span class="n">y</span> <span class="o">&gt;=</span> <span class="mi">0</span><span class="p">)</span> <span class="p">{</span>
    <span class="n">p</span><span class="o">-&gt;</span><span class="n">y</span> <span class="o">=</span> <span class="mi">50</span><span class="p">;</span>	<span class="c1">//Set or calculate the self height</span>
  <span class="p">}</span>
<span class="p">}</span>
</pre></div>
</div>
</div>
<div class="section" id="examples">
<h2>Examples<a class="headerlink" href="#examples" title="Permalink to this headline">¶</a></h2>
<div class="section" id="c">
<h3>C<a class="headerlink" href="#c" title="Permalink to this headline">¶</a></h3>
<div class="section" id="nested-scrolling">
<h4>Nested scrolling<a class="headerlink" href="#nested-scrolling" title="Permalink to this headline">¶</a></h4>
<iframe class='lv-example' src='/8.0/_static/built_lv_examples/index.html?example=lv_example_scroll_1&w=320&h=240'></iframe><div class="toggle docutils container">
<div class="header docutils container">
<p>code &nbsp; <a class='fa fa-github' href='https://github.com/lvgl/lvgl/blob/5d0ba633a5dc8bb1c3e3714461b6839f205a69fa/examples/scroll/lv_example_scroll_1.c'>&nbsp; view on GitHub</a></p></div>
<div class="highlight-c notranslate"><div class="highlight"><pre><span></span><span class="cp">#include</span> <span class="cpf">&quot;../lv_examples.h&quot;</span><span class="cp"></span>
<span class="cp">#if LV_BUILD_EXAMPLES</span>

<span class="cm">/**</span>
<span class="cm"> * Demonstrate how scrolling appears automatically</span>
<span class="cm"> */</span>
<span class="kt">void</span> <span class="nf">lv_example_scroll_1</span><span class="p">(</span><span class="kt">void</span><span class="p">)</span>
<span class="p">{</span>
    <span class="cm">/*Create an object with the new style*/</span>
    <span class="n">lv_obj_t</span> <span class="o">*</span> <span class="n">panel</span> <span class="o">=</span> <span class="n">lv_obj_create</span><span class="p">(</span><span class="n">lv_scr_act</span><span class="p">());</span>
    <span class="n">lv_obj_set_size</span><span class="p">(</span><span class="n">panel</span><span class="p">,</span> <span class="mi">200</span><span class="p">,</span> <span class="mi">200</span><span class="p">);</span>
    <span class="n">lv_obj_center</span><span class="p">(</span><span class="n">panel</span><span class="p">);</span>

    <span class="n">lv_obj_t</span> <span class="o">*</span> <span class="n">child</span><span class="p">;</span>
    <span class="n">lv_obj_t</span> <span class="o">*</span> <span class="n">label</span><span class="p">;</span>

    <span class="n">child</span> <span class="o">=</span> <span class="n">lv_obj_create</span><span class="p">(</span><span class="n">panel</span><span class="p">);</span>
    <span class="n">lv_obj_set_pos</span><span class="p">(</span><span class="n">child</span><span class="p">,</span> <span class="mi">0</span><span class="p">,</span> <span class="mi">0</span><span class="p">);</span>
    <span class="n">lv_obj_set_size</span><span class="p">(</span><span class="n">child</span><span class="p">,</span> <span class="mi">70</span><span class="p">,</span> <span class="mi">70</span><span class="p">);</span>
    <span class="n">label</span> <span class="o">=</span> <span class="n">lv_label_create</span><span class="p">(</span><span class="n">child</span><span class="p">);</span>
    <span class="n">lv_label_set_text</span><span class="p">(</span><span class="n">label</span><span class="p">,</span> <span class="s">&quot;Zero&quot;</span><span class="p">);</span>
    <span class="n">lv_obj_center</span><span class="p">(</span><span class="n">label</span><span class="p">);</span>

    <span class="n">child</span> <span class="o">=</span> <span class="n">lv_obj_create</span><span class="p">(</span><span class="n">panel</span><span class="p">);</span>
    <span class="n">lv_obj_set_pos</span><span class="p">(</span><span class="n">child</span><span class="p">,</span> <span class="mi">160</span><span class="p">,</span> <span class="mi">80</span><span class="p">);</span>
    <span class="n">lv_obj_set_size</span><span class="p">(</span><span class="n">child</span><span class="p">,</span> <span class="mi">80</span><span class="p">,</span> <span class="mi">80</span><span class="p">);</span>

    <span class="n">lv_obj_t</span> <span class="o">*</span> <span class="n">child2</span> <span class="o">=</span> <span class="n">lv_btn_create</span><span class="p">(</span><span class="n">child</span><span class="p">);</span>
    <span class="n">lv_obj_set_size</span><span class="p">(</span><span class="n">child2</span><span class="p">,</span> <span class="mi">100</span><span class="p">,</span> <span class="mi">50</span><span class="p">);</span>

    <span class="n">label</span> <span class="o">=</span> <span class="n">lv_label_create</span><span class="p">(</span><span class="n">child2</span><span class="p">);</span>
    <span class="n">lv_label_set_text</span><span class="p">(</span><span class="n">label</span><span class="p">,</span> <span class="s">&quot;Right&quot;</span><span class="p">);</span>
    <span class="n">lv_obj_center</span><span class="p">(</span><span class="n">label</span><span class="p">);</span>

    <span class="n">child</span> <span class="o">=</span> <span class="n">lv_obj_create</span><span class="p">(</span><span class="n">panel</span><span class="p">);</span>
    <span class="n">lv_obj_set_pos</span><span class="p">(</span><span class="n">child</span><span class="p">,</span> <span class="mi">40</span><span class="p">,</span> <span class="mi">160</span><span class="p">);</span>
    <span class="n">lv_obj_set_size</span><span class="p">(</span><span class="n">child</span><span class="p">,</span> <span class="mi">100</span><span class="p">,</span> <span class="mi">70</span><span class="p">);</span>
    <span class="n">label</span> <span class="o">=</span> <span class="n">lv_label_create</span><span class="p">(</span><span class="n">child</span><span class="p">);</span>
    <span class="n">lv_label_set_text</span><span class="p">(</span><span class="n">label</span><span class="p">,</span> <span class="s">&quot;Bottom&quot;</span><span class="p">);</span>
    <span class="n">lv_obj_center</span><span class="p">(</span><span class="n">label</span><span class="p">);</span>
<span class="p">}</span>

<span class="cp">#endif</span>
</pre></div>
</div>
</div>
</div>
<div class="section" id="id1">
<h4>Snapping<a class="headerlink" href="#id1" title="Permalink to this headline">¶</a></h4>
<iframe class='lv-example' src='/8.0/_static/built_lv_examples/index.html?example=lv_example_scroll_2&w=320&h=240'></iframe><div class="toggle docutils container">
<div class="header docutils container">
<p>code &nbsp; <a class='fa fa-github' href='https://github.com/lvgl/lvgl/blob/5d0ba633a5dc8bb1c3e3714461b6839f205a69fa/examples/scroll/lv_example_scroll_2.c'>&nbsp; view on GitHub</a></p></div>
<div class="highlight-c notranslate"><div class="highlight"><pre><span></span><span class="cp">#include</span> <span class="cpf">&quot;../lv_examples.h&quot;</span><span class="cp"></span>
<span class="cp">#if LV_BUILD_EXAMPLES &amp;&amp; LV_USE_FLEX</span>

<span class="k">static</span> <span class="kt">void</span> <span class="nf">sw_event_cb</span><span class="p">(</span><span class="n">lv_event_t</span> <span class="o">*</span> <span class="n">e</span><span class="p">)</span>
<span class="p">{</span>
    <span class="n">lv_event_code_t</span> <span class="n">code</span> <span class="o">=</span> <span class="n">lv_event_get_code</span><span class="p">(</span><span class="n">e</span><span class="p">);</span>
    <span class="n">lv_obj_t</span> <span class="o">*</span> <span class="n">sw</span> <span class="o">=</span> <span class="n">lv_event_get_target</span><span class="p">(</span><span class="n">e</span><span class="p">);</span>

    <span class="k">if</span><span class="p">(</span><span class="n">code</span> <span class="o">==</span> <span class="n">LV_EVENT_VALUE_CHANGED</span><span class="p">)</span> <span class="p">{</span>
        <span class="n">lv_obj_t</span> <span class="o">*</span> <span class="n">list</span> <span class="o">=</span> <span class="n">lv_event_get_user_data</span><span class="p">(</span><span class="n">e</span><span class="p">);</span>

        <span class="k">if</span><span class="p">(</span><span class="n">lv_obj_has_state</span><span class="p">(</span><span class="n">sw</span><span class="p">,</span> <span class="n">LV_STATE_CHECKED</span><span class="p">))</span> <span class="n">lv_obj_add_flag</span><span class="p">(</span><span class="n">list</span><span class="p">,</span> <span class="n">LV_OBJ_FLAG_SCROLL_ONE</span><span class="p">);</span>
        <span class="k">else</span> <span class="n">lv_obj_clear_flag</span><span class="p">(</span><span class="n">list</span><span class="p">,</span> <span class="n">LV_OBJ_FLAG_SCROLL_ONE</span><span class="p">);</span>
    <span class="p">}</span>
<span class="p">}</span>

<span class="cm">/**</span>
<span class="cm"> * Show an example to scroll snap</span>
<span class="cm"> */</span>
<span class="kt">void</span> <span class="nf">lv_example_scroll_2</span><span class="p">(</span><span class="kt">void</span><span class="p">)</span>
<span class="p">{</span>
    <span class="n">lv_obj_t</span> <span class="o">*</span> <span class="n">panel</span> <span class="o">=</span> <span class="n">lv_obj_create</span><span class="p">(</span><span class="n">lv_scr_act</span><span class="p">());</span>
    <span class="n">lv_obj_set_size</span><span class="p">(</span><span class="n">panel</span><span class="p">,</span> <span class="mi">280</span><span class="p">,</span> <span class="mi">120</span><span class="p">);</span>
    <span class="n">lv_obj_set_scroll_snap_x</span><span class="p">(</span><span class="n">panel</span><span class="p">,</span> <span class="n">LV_SCROLL_SNAP_CENTER</span><span class="p">);</span>
    <span class="n">lv_obj_set_flex_flow</span><span class="p">(</span><span class="n">panel</span><span class="p">,</span> <span class="n">LV_FLEX_FLOW_ROW</span><span class="p">);</span>
    <span class="n">lv_obj_align</span><span class="p">(</span><span class="n">panel</span><span class="p">,</span> <span class="n">LV_ALIGN_CENTER</span><span class="p">,</span> <span class="mi">0</span><span class="p">,</span> <span class="mi">20</span><span class="p">);</span>

    <span class="kt">uint32_t</span> <span class="n">i</span><span class="p">;</span>
    <span class="k">for</span><span class="p">(</span><span class="n">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="n">i</span> <span class="o">&lt;</span> <span class="mi">10</span><span class="p">;</span> <span class="n">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
        <span class="n">lv_obj_t</span> <span class="o">*</span> <span class="n">btn</span> <span class="o">=</span> <span class="n">lv_btn_create</span><span class="p">(</span><span class="n">panel</span><span class="p">);</span>
        <span class="n">lv_obj_set_size</span><span class="p">(</span><span class="n">btn</span><span class="p">,</span> <span class="mi">150</span><span class="p">,</span> <span class="n">lv_pct</span><span class="p">(</span><span class="mi">100</span><span class="p">));</span>

        <span class="n">lv_obj_t</span> <span class="o">*</span> <span class="n">label</span> <span class="o">=</span> <span class="n">lv_label_create</span><span class="p">(</span><span class="n">btn</span><span class="p">);</span>
        <span class="k">if</span><span class="p">(</span><span class="n">i</span> <span class="o">==</span> <span class="mi">3</span><span class="p">)</span> <span class="p">{</span>
            <span class="n">lv_label_set_text_fmt</span><span class="p">(</span><span class="n">label</span><span class="p">,</span> <span class="s">&quot;Panel %d</span><span class="se">\n</span><span class="s">no snap&quot;</span><span class="p">,</span> <span class="n">i</span><span class="p">);</span>
            <span class="n">lv_obj_clear_flag</span><span class="p">(</span><span class="n">btn</span><span class="p">,</span> <span class="n">LV_OBJ_FLAG_SNAPABLE</span><span class="p">);</span>
        <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
            <span class="n">lv_label_set_text_fmt</span><span class="p">(</span><span class="n">label</span><span class="p">,</span> <span class="s">&quot;Panel %d&quot;</span><span class="p">,</span> <span class="n">i</span><span class="p">);</span>
        <span class="p">}</span>

        <span class="n">lv_obj_center</span><span class="p">(</span><span class="n">label</span><span class="p">);</span>
    <span class="p">}</span>
    <span class="n">lv_obj_update_snap</span><span class="p">(</span><span class="n">panel</span><span class="p">,</span> <span class="n">LV_ANIM_ON</span><span class="p">);</span>

<span class="cp">#if LV_USE_SWITCH</span>
    <span class="cm">/*Switch between &quot;One scroll&quot; and &quot;Normal scroll&quot; mode*/</span>
    <span class="n">lv_obj_t</span> <span class="o">*</span> <span class="n">sw</span> <span class="o">=</span> <span class="n">lv_switch_create</span><span class="p">(</span><span class="n">lv_scr_act</span><span class="p">());</span>
    <span class="n">lv_obj_align</span><span class="p">(</span><span class="n">sw</span><span class="p">,</span> <span class="n">LV_ALIGN_TOP_RIGHT</span><span class="p">,</span> <span class="mi">-20</span><span class="p">,</span> <span class="mi">10</span><span class="p">);</span>
    <span class="n">lv_obj_add_event_cb</span><span class="p">(</span><span class="n">sw</span><span class="p">,</span> <span class="n">sw_event_cb</span><span class="p">,</span> <span class="n">LV_EVENT_ALL</span><span class="p">,</span> <span class="n">panel</span><span class="p">);</span>
    <span class="n">lv_obj_t</span> <span class="o">*</span> <span class="n">label</span> <span class="o">=</span> <span class="n">lv_label_create</span><span class="p">(</span><span class="n">lv_scr_act</span><span class="p">());</span>
    <span class="n">lv_label_set_text</span><span class="p">(</span><span class="n">label</span><span class="p">,</span> <span class="s">&quot;One scroll&quot;</span><span class="p">);</span>
    <span class="n">lv_obj_align_to</span><span class="p">(</span><span class="n">label</span><span class="p">,</span> <span class="n">sw</span><span class="p">,</span> <span class="n">LV_ALIGN_OUT_BOTTOM_MID</span><span class="p">,</span> <span class="mi">0</span><span class="p">,</span> <span class="mi">5</span><span class="p">);</span>
<span class="cp">#endif</span>
<span class="p">}</span>

<span class="cp">#endif</span>
</pre></div>
</div>
</div>
</div>
<div class="section" id="floating-button">
<h4>Floating button<a class="headerlink" href="#floating-button" title="Permalink to this headline">¶</a></h4>
<iframe class='lv-example' src='/8.0/_static/built_lv_examples/index.html?example=lv_example_scroll_3&w=320&h=240'></iframe><div class="toggle docutils container">
<div class="header docutils container">
<p>code &nbsp; <a class='fa fa-github' href='https://github.com/lvgl/lvgl/blob/5d0ba633a5dc8bb1c3e3714461b6839f205a69fa/examples/scroll/lv_example_scroll_3.c'>&nbsp; view on GitHub</a></p></div>
<div class="highlight-c notranslate"><div class="highlight"><pre><span></span><span class="cp">#include</span> <span class="cpf">&quot;../lv_examples.h&quot;</span><span class="cp"></span>
<span class="cp">#if LV_BUILD_EXAMPLES &amp;&amp; LV_USE_LIST</span>

<span class="k">static</span> <span class="kt">uint32_t</span> <span class="n">btn_cnt</span> <span class="o">=</span> <span class="mi">1</span><span class="p">;</span>

<span class="k">static</span> <span class="kt">void</span> <span class="nf">float_btn_event_cb</span><span class="p">(</span><span class="n">lv_event_t</span> <span class="o">*</span> <span class="n">e</span><span class="p">)</span>
<span class="p">{</span>
    <span class="n">lv_event_code_t</span> <span class="n">code</span> <span class="o">=</span> <span class="n">lv_event_get_code</span><span class="p">(</span><span class="n">e</span><span class="p">);</span>
    <span class="n">lv_obj_t</span> <span class="o">*</span> <span class="n">float_btn</span> <span class="o">=</span> <span class="n">lv_event_get_target</span><span class="p">(</span><span class="n">e</span><span class="p">);</span>

    <span class="k">if</span><span class="p">(</span><span class="n">code</span> <span class="o">==</span> <span class="n">LV_EVENT_CLICKED</span><span class="p">)</span> <span class="p">{</span>
        <span class="n">lv_obj_t</span> <span class="o">*</span> <span class="n">list</span> <span class="o">=</span> <span class="n">lv_event_get_user_data</span><span class="p">(</span><span class="n">e</span><span class="p">);</span>
        <span class="kt">char</span> <span class="n">buf</span><span class="p">[</span><span class="mi">32</span><span class="p">];</span>
        <span class="n">lv_snprintf</span><span class="p">(</span><span class="n">buf</span><span class="p">,</span> <span class="k">sizeof</span><span class="p">(</span><span class="n">buf</span><span class="p">),</span> <span class="s">&quot;Track %d&quot;</span><span class="p">,</span> <span class="n">btn_cnt</span><span class="p">);</span>
        <span class="n">lv_obj_t</span> <span class="o">*</span> <span class="n">list_btn</span> <span class="o">=</span> <span class="n">lv_list_add_btn</span><span class="p">(</span><span class="n">list</span><span class="p">,</span> <span class="n">LV_SYMBOL_AUDIO</span><span class="p">,</span> <span class="n">buf</span><span class="p">);</span>
        <span class="n">btn_cnt</span><span class="o">++</span><span class="p">;</span>

        <span class="n">lv_obj_move_foreground</span><span class="p">(</span><span class="n">float_btn</span><span class="p">);</span>

        <span class="n">lv_obj_scroll_to_view</span><span class="p">(</span><span class="n">list_btn</span><span class="p">,</span> <span class="n">LV_ANIM_ON</span><span class="p">);</span>
    <span class="p">}</span>
<span class="p">}</span>

<span class="cm">/**</span>
<span class="cm"> * Create a list a with a floating button</span>
<span class="cm"> */</span>
<span class="kt">void</span> <span class="nf">lv_example_scroll_3</span><span class="p">(</span><span class="kt">void</span><span class="p">)</span>
<span class="p">{</span>
    <span class="n">lv_obj_t</span> <span class="o">*</span> <span class="n">list</span> <span class="o">=</span> <span class="n">lv_list_create</span><span class="p">(</span><span class="n">lv_scr_act</span><span class="p">());</span>
    <span class="n">lv_obj_set_size</span><span class="p">(</span><span class="n">list</span><span class="p">,</span> <span class="mi">280</span><span class="p">,</span> <span class="mi">220</span><span class="p">);</span>
    <span class="n">lv_obj_center</span><span class="p">(</span><span class="n">list</span><span class="p">);</span>

    <span class="k">for</span><span class="p">(</span><span class="n">btn_cnt</span> <span class="o">=</span> <span class="mi">1</span><span class="p">;</span> <span class="n">btn_cnt</span> <span class="o">&lt;=</span> <span class="mi">2</span><span class="p">;</span> <span class="n">btn_cnt</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
        <span class="kt">char</span> <span class="n">buf</span><span class="p">[</span><span class="mi">32</span><span class="p">];</span>
        <span class="n">lv_snprintf</span><span class="p">(</span><span class="n">buf</span><span class="p">,</span> <span class="k">sizeof</span><span class="p">(</span><span class="n">buf</span><span class="p">),</span> <span class="s">&quot;Track %d&quot;</span><span class="p">,</span> <span class="n">btn_cnt</span><span class="p">);</span>
        <span class="n">lv_list_add_btn</span><span class="p">(</span><span class="n">list</span><span class="p">,</span> <span class="n">LV_SYMBOL_AUDIO</span><span class="p">,</span> <span class="n">buf</span><span class="p">);</span>
    <span class="p">}</span>

    <span class="n">lv_obj_t</span> <span class="o">*</span> <span class="n">float_btn</span> <span class="o">=</span> <span class="n">lv_btn_create</span><span class="p">(</span><span class="n">list</span><span class="p">);</span>
    <span class="n">lv_obj_set_size</span><span class="p">(</span><span class="n">float_btn</span><span class="p">,</span> <span class="mi">50</span><span class="p">,</span> <span class="mi">50</span><span class="p">);</span>
    <span class="n">lv_obj_add_flag</span><span class="p">(</span><span class="n">float_btn</span><span class="p">,</span> <span class="n">LV_OBJ_FLAG_FLOATING</span><span class="p">);</span>
    <span class="n">lv_obj_align</span><span class="p">(</span><span class="n">float_btn</span><span class="p">,</span> <span class="n">LV_ALIGN_BOTTOM_RIGHT</span><span class="p">,</span> <span class="mi">0</span><span class="p">,</span> <span class="o">-</span><span class="n">lv_obj_get_style_pad_right</span><span class="p">(</span><span class="n">list</span><span class="p">,</span> <span class="n">LV_PART_MAIN</span><span class="p">));</span>
    <span class="n">lv_obj_add_event_cb</span><span class="p">(</span><span class="n">float_btn</span><span class="p">,</span> <span class="n">float_btn_event_cb</span><span class="p">,</span> <span class="n">LV_EVENT_ALL</span><span class="p">,</span> <span class="n">list</span><span class="p">);</span>
    <span class="n">lv_obj_set_style_radius</span><span class="p">(</span><span class="n">float_btn</span><span class="p">,</span> <span class="n">LV_RADIUS_CIRCLE</span><span class="p">,</span> <span class="mi">0</span><span class="p">);</span>
    <span class="n">lv_obj_set_style_bg_img_src</span><span class="p">(</span><span class="n">float_btn</span><span class="p">,</span> <span class="n">LV_SYMBOL_PLUS</span><span class="p">,</span> <span class="mi">0</span><span class="p">);</span>
    <span class="n">lv_obj_set_style_text_font</span><span class="p">(</span><span class="n">float_btn</span><span class="p">,</span> <span class="n">lv_theme_get_font_large</span><span class="p">(</span><span class="n">float_btn</span><span class="p">),</span> <span class="mi">0</span><span class="p">);</span>
<span class="p">}</span>

<span class="cp">#endif</span>
</pre></div>
</div>
</div>
</div>
<div class="section" id="styling-the-scrollbars">
<h4>Styling the scrollbars<a class="headerlink" href="#styling-the-scrollbars" title="Permalink to this headline">¶</a></h4>
<iframe class='lv-example' src='/8.0/_static/built_lv_examples/index.html?example=lv_example_scroll_4&w=320&h=240'></iframe><div class="toggle docutils container">
<div class="header docutils container">
<p>code &nbsp; <a class='fa fa-github' href='https://github.com/lvgl/lvgl/blob/5d0ba633a5dc8bb1c3e3714461b6839f205a69fa/examples/scroll/lv_example_scroll_4.c'>&nbsp; view on GitHub</a></p></div>
<div class="highlight-c notranslate"><div class="highlight"><pre><span></span><span class="cp">#include</span> <span class="cpf">&quot;../lv_examples.h&quot;</span><span class="cp"></span>
<span class="cp">#if LV_BUILD_EXAMPLES &amp;&amp; LV_USE_LIST</span>


<span class="cm">/**</span>
<span class="cm"> * Styling the scrollbars</span>
<span class="cm"> */</span>
<span class="kt">void</span> <span class="nf">lv_example_scroll_4</span><span class="p">(</span><span class="kt">void</span><span class="p">)</span>
<span class="p">{</span>
    <span class="n">lv_obj_t</span> <span class="o">*</span> <span class="n">obj</span> <span class="o">=</span> <span class="n">lv_obj_create</span><span class="p">(</span><span class="n">lv_scr_act</span><span class="p">());</span>
    <span class="n">lv_obj_set_size</span><span class="p">(</span><span class="n">obj</span><span class="p">,</span> <span class="mi">200</span><span class="p">,</span> <span class="mi">100</span><span class="p">);</span>
    <span class="n">lv_obj_center</span><span class="p">(</span><span class="n">obj</span><span class="p">);</span>

    <span class="n">lv_obj_t</span> <span class="o">*</span> <span class="n">label</span> <span class="o">=</span> <span class="n">lv_label_create</span><span class="p">(</span><span class="n">obj</span><span class="p">);</span>
    <span class="n">lv_label_set_text</span><span class="p">(</span><span class="n">label</span><span class="p">,</span>
            <span class="s">&quot;Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span><span class="se">\n</span><span class="s">&quot;</span>
            <span class="s">&quot;Etiam dictum, tortor vestibulum lacinia laoreet, mi neque consectetur neque, vel mattis odio dolor egestas ligula. </span><span class="se">\n</span><span class="s">&quot;</span>
            <span class="s">&quot;Sed vestibulum sapien nulla, id convallis ex porttitor nec. </span><span class="se">\n</span><span class="s">&quot;</span>
            <span class="s">&quot;Duis et massa eu libero accumsan faucibus a in arcu. </span><span class="se">\n</span><span class="s">&quot;</span>
            <span class="s">&quot;Ut pulvinar odio lorem, vel tempus turpis condimentum quis. Nam consectetur condimentum sem in auctor. </span><span class="se">\n</span><span class="s">&quot;</span>
            <span class="s">&quot;Sed nisl augue, venenatis in blandit et, gravida ac tortor. </span><span class="se">\n</span><span class="s">&quot;</span>
            <span class="s">&quot;Etiam dapibus elementum suscipit. </span><span class="se">\n</span><span class="s">&quot;</span>
            <span class="s">&quot;Proin mollis sollicitudin convallis. </span><span class="se">\n</span><span class="s">&quot;</span>
            <span class="s">&quot;Integer dapibus tempus arcu nec viverra. </span><span class="se">\n</span><span class="s">&quot;</span>
            <span class="s">&quot;Donec molestie nulla enim, eu interdum velit placerat quis. </span><span class="se">\n</span><span class="s">&quot;</span>
            <span class="s">&quot;Donec id efficitur risus, at molestie turpis. </span><span class="se">\n</span><span class="s">&quot;</span>
            <span class="s">&quot;Suspendisse vestibulum consectetur nunc ut commodo. </span><span class="se">\n</span><span class="s">&quot;</span>
            <span class="s">&quot;Fusce molestie rhoncus nisi sit amet tincidunt. </span><span class="se">\n</span><span class="s">&quot;</span>
            <span class="s">&quot;Suspendisse a nunc ut magna ornare volutpat.&quot;</span><span class="p">);</span>


    <span class="cm">/*Remove the style of scrollbar to have clean start*/</span>
    <span class="n">lv_obj_remove_style</span><span class="p">(</span><span class="n">obj</span><span class="p">,</span> <span class="nb">NULL</span><span class="p">,</span> <span class="n">LV_PART_SCROLLBAR</span> <span class="o">|</span> <span class="n">LV_STATE_ANY</span><span class="p">);</span>

    <span class="cm">/*Create a transition the animate the some properties on state change*/</span>
    <span class="k">static</span> <span class="k">const</span> <span class="n">lv_style_prop_t</span> <span class="n">props</span><span class="p">[]</span> <span class="o">=</span> <span class="p">{</span><span class="n">LV_STYLE_BG_OPA</span><span class="p">,</span> <span class="n">LV_STYLE_WIDTH</span><span class="p">,</span> <span class="mi">0</span><span class="p">};</span>
    <span class="k">static</span> <span class="n">lv_style_transition_dsc_t</span> <span class="n">trans</span><span class="p">;</span>
    <span class="n">lv_style_transition_dsc_init</span><span class="p">(</span><span class="o">&amp;</span><span class="n">trans</span><span class="p">,</span> <span class="n">props</span><span class="p">,</span> <span class="n">lv_anim_path_linear</span><span class="p">,</span> <span class="mi">200</span><span class="p">,</span> <span class="mi">0</span><span class="p">,</span> <span class="nb">NULL</span><span class="p">);</span>

    <span class="cm">/*Create a style for the scrollbars*/</span>
    <span class="k">static</span> <span class="n">lv_style_t</span> <span class="n">style</span><span class="p">;</span>
    <span class="n">lv_style_init</span><span class="p">(</span><span class="o">&amp;</span><span class="n">style</span><span class="p">);</span>
    <span class="n">lv_style_set_width</span><span class="p">(</span><span class="o">&amp;</span><span class="n">style</span><span class="p">,</span> <span class="mi">4</span><span class="p">);</span>      <span class="cm">/*Width of the scrollbar*/</span>
    <span class="n">lv_style_set_pad_right</span><span class="p">(</span><span class="o">&amp;</span><span class="n">style</span><span class="p">,</span> <span class="mi">5</span><span class="p">);</span>  <span class="cm">/*Space from the parallel side*/</span>
    <span class="n">lv_style_set_pad_top</span><span class="p">(</span><span class="o">&amp;</span><span class="n">style</span><span class="p">,</span> <span class="mi">5</span><span class="p">);</span>    <span class="cm">/*Space from the perpendicular side*/</span>

    <span class="n">lv_style_set_radius</span><span class="p">(</span><span class="o">&amp;</span><span class="n">style</span><span class="p">,</span> <span class="mi">2</span><span class="p">);</span>
    <span class="n">lv_style_set_bg_opa</span><span class="p">(</span><span class="o">&amp;</span><span class="n">style</span><span class="p">,</span> <span class="n">LV_OPA_70</span><span class="p">);</span>
    <span class="n">lv_style_set_bg_color</span><span class="p">(</span><span class="o">&amp;</span><span class="n">style</span><span class="p">,</span> <span class="n">lv_palette_main</span><span class="p">(</span><span class="n">LV_PALETTE_BLUE</span><span class="p">));</span>
    <span class="n">lv_style_set_border_color</span><span class="p">(</span><span class="o">&amp;</span><span class="n">style</span><span class="p">,</span> <span class="n">lv_palette_darken</span><span class="p">(</span><span class="n">LV_PALETTE_BLUE</span><span class="p">,</span> <span class="mi">3</span><span class="p">));</span>
    <span class="n">lv_style_set_border_width</span><span class="p">(</span><span class="o">&amp;</span><span class="n">style</span><span class="p">,</span> <span class="mi">2</span><span class="p">);</span>
    <span class="n">lv_style_set_shadow_width</span><span class="p">(</span><span class="o">&amp;</span><span class="n">style</span><span class="p">,</span> <span class="mi">8</span><span class="p">);</span>
    <span class="n">lv_style_set_shadow_spread</span><span class="p">(</span><span class="o">&amp;</span><span class="n">style</span><span class="p">,</span> <span class="mi">2</span><span class="p">);</span>
    <span class="n">lv_style_set_shadow_color</span><span class="p">(</span><span class="o">&amp;</span><span class="n">style</span><span class="p">,</span> <span class="n">lv_palette_darken</span><span class="p">(</span><span class="n">LV_PALETTE_BLUE</span><span class="p">,</span> <span class="mi">1</span><span class="p">));</span>

    <span class="n">lv_style_set_transition</span><span class="p">(</span><span class="o">&amp;</span><span class="n">style</span><span class="p">,</span> <span class="o">&amp;</span><span class="n">trans</span><span class="p">);</span>

    <span class="cm">/*Make the scrollbars wider and use 100% opacity when scrolled*/</span>
    <span class="k">static</span> <span class="n">lv_style_t</span> <span class="n">style_scrolled</span><span class="p">;</span>
    <span class="n">lv_style_init</span><span class="p">(</span><span class="o">&amp;</span><span class="n">style_scrolled</span><span class="p">);</span>
    <span class="n">lv_style_set_width</span><span class="p">(</span><span class="o">&amp;</span><span class="n">style_scrolled</span><span class="p">,</span> <span class="mi">8</span><span class="p">);</span>
    <span class="n">lv_style_set_bg_opa</span><span class="p">(</span><span class="o">&amp;</span><span class="n">style_scrolled</span><span class="p">,</span> <span class="n">LV_OPA_COVER</span><span class="p">);</span>

    <span class="n">lv_obj_add_style</span><span class="p">(</span><span class="n">obj</span><span class="p">,</span> <span class="o">&amp;</span><span class="n">style</span><span class="p">,</span> <span class="n">LV_PART_SCROLLBAR</span><span class="p">);</span>
    <span class="n">lv_obj_add_style</span><span class="p">(</span><span class="n">obj</span><span class="p">,</span> <span class="o">&amp;</span><span class="n">style_scrolled</span><span class="p">,</span> <span class="n">LV_PART_SCROLLBAR</span> <span class="o">|</span> <span class="n">LV_STATE_SCROLLED</span><span class="p">);</span>
<span class="p">}</span>

<span class="cp">#endif</span>
</pre></div>
</div>
</div>
</div>
<div class="section" id="right-to-left-scrolling">
<h4>Right to left scrolling<a class="headerlink" href="#right-to-left-scrolling" title="Permalink to this headline">¶</a></h4>
<iframe class='lv-example' src='/8.0/_static/built_lv_examples/index.html?example=lv_example_scroll_5&w=320&h=240'></iframe><div class="toggle docutils container">
<div class="header docutils container">
<p>code &nbsp; <a class='fa fa-github' href='https://github.com/lvgl/lvgl/blob/5d0ba633a5dc8bb1c3e3714461b6839f205a69fa/examples/scroll/lv_example_scroll_5.c'>&nbsp; view on GitHub</a></p></div>
<div class="highlight-c notranslate"><div class="highlight"><pre><span></span><span class="cp">#include</span> <span class="cpf">&quot;../lv_examples.h&quot;</span><span class="cp"></span>
<span class="cp">#if LV_BUILD_EXAMPLES &amp;&amp; LV_FONT_DEJAVU_16_PERSIAN_HEBREW</span>


<span class="cm">/**</span>
<span class="cm"> * Scrolling with Right To Left base direction</span>
<span class="cm"> */</span>
<span class="kt">void</span> <span class="nf">lv_example_scroll_5</span><span class="p">(</span><span class="kt">void</span><span class="p">)</span>
<span class="p">{</span>
    <span class="n">lv_obj_t</span> <span class="o">*</span> <span class="n">obj</span> <span class="o">=</span> <span class="n">lv_obj_create</span><span class="p">(</span><span class="n">lv_scr_act</span><span class="p">());</span>
    <span class="n">lv_obj_set_style_base_dir</span><span class="p">(</span><span class="n">obj</span><span class="p">,</span> <span class="n">LV_BASE_DIR_RTL</span><span class="p">,</span> <span class="mi">0</span><span class="p">);</span>
    <span class="n">lv_obj_set_size</span><span class="p">(</span><span class="n">obj</span><span class="p">,</span> <span class="mi">200</span><span class="p">,</span> <span class="mi">100</span><span class="p">);</span>
    <span class="n">lv_obj_center</span><span class="p">(</span><span class="n">obj</span><span class="p">);</span>

    <span class="n">lv_obj_t</span> <span class="o">*</span> <span class="n">label</span> <span class="o">=</span> <span class="n">lv_label_create</span><span class="p">(</span><span class="n">obj</span><span class="p">);</span>
    <span class="n">lv_label_set_text</span><span class="p">(</span><span class="n">label</span><span class="p">,</span><span class="s">&quot;میکروکُنترولر (به انگلیسی: Microcontroller) گونه‌ای ریزپردازنده است که دارای حافظهٔ دسترسی تصادفی (RAM) و حافظهٔ فقط‌خواندنی (ROM)، تایمر، پورت‌های ورودی و خروجی (I/O) و درگاه ترتیبی (Serial Port پورت سریال)، درون خود تراشه است، و می‌تواند به تنهایی ابزارهای دیگر را کنترل کند. به عبارت دیگر یک میکروکنترلر، مدار مجتمع کوچکی است که از یک CPU کوچک و اجزای دیگری مانند تایمر، درگاه‌های ورودی و خروجی آنالوگ و دیجیتال و حافظه تشکیل شده‌است.&quot;</span><span class="p">);</span>
    <span class="n">lv_obj_set_width</span><span class="p">(</span><span class="n">label</span><span class="p">,</span> <span class="mi">400</span><span class="p">);</span>
    <span class="n">lv_obj_set_style_text_font</span><span class="p">(</span><span class="n">label</span><span class="p">,</span> <span class="o">&amp;</span><span class="n">lv_font_dejavu_16_persian_hebrew</span><span class="p">,</span> <span class="mi">0</span><span class="p">);</span>

<span class="p">}</span>

<span class="cp">#endif</span>
</pre></div>
</div>
</div>
</div>
<div class="section" id="translate-on-scroll">
<h4>Translate on scroll<a class="headerlink" href="#translate-on-scroll" title="Permalink to this headline">¶</a></h4>
<iframe class='lv-example' src='/8.0/_static/built_lv_examples/index.html?example=lv_example_scroll_6&w=320&h=240'></iframe><div class="toggle docutils container">
<div class="header docutils container">
<p>code &nbsp; <a class='fa fa-github' href='https://github.com/lvgl/lvgl/blob/5d0ba633a5dc8bb1c3e3714461b6839f205a69fa/examples/scroll/lv_example_scroll_6.c'>&nbsp; view on GitHub</a></p></div>
<div class="highlight-c notranslate"><div class="highlight"><pre><span></span><span class="cp">#include</span> <span class="cpf">&quot;../lv_examples.h&quot;</span><span class="cp"></span>
<span class="cp">#if LV_BUILD_EXAMPLES</span>

<span class="k">static</span> <span class="kt">void</span> <span class="nf">scroll_event_cb</span><span class="p">(</span><span class="n">lv_event_t</span> <span class="o">*</span> <span class="n">e</span><span class="p">)</span>
<span class="p">{</span>
    <span class="n">lv_obj_t</span> <span class="o">*</span> <span class="n">cont</span> <span class="o">=</span> <span class="n">lv_event_get_target</span><span class="p">(</span><span class="n">e</span><span class="p">);</span>

    <span class="n">lv_area_t</span> <span class="n">cont_a</span><span class="p">;</span>
    <span class="n">lv_obj_get_coords</span><span class="p">(</span><span class="n">cont</span><span class="p">,</span> <span class="o">&amp;</span><span class="n">cont_a</span><span class="p">);</span>
    <span class="n">lv_coord_t</span> <span class="n">cont_y_center</span> <span class="o">=</span> <span class="n">cont_a</span><span class="p">.</span><span class="n">y1</span> <span class="o">+</span> <span class="n">lv_area_get_height</span><span class="p">(</span><span class="o">&amp;</span><span class="n">cont_a</span><span class="p">)</span> <span class="o">/</span> <span class="mi">2</span><span class="p">;</span>

    <span class="n">lv_coord_t</span> <span class="n">r</span> <span class="o">=</span> <span class="n">lv_obj_get_height</span><span class="p">(</span><span class="n">cont</span><span class="p">)</span> <span class="o">*</span> <span class="mi">7</span> <span class="o">/</span> <span class="mi">10</span><span class="p">;</span>
    <span class="kt">uint32_t</span> <span class="n">i</span><span class="p">;</span>
    <span class="kt">uint32_t</span> <span class="n">child_cnt</span> <span class="o">=</span> <span class="n">lv_obj_get_child_cnt</span><span class="p">(</span><span class="n">cont</span><span class="p">);</span>
    <span class="k">for</span><span class="p">(</span><span class="n">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="n">i</span> <span class="o">&lt;</span> <span class="n">child_cnt</span><span class="p">;</span> <span class="n">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
        <span class="n">lv_obj_t</span> <span class="o">*</span> <span class="n">child</span> <span class="o">=</span> <span class="n">lv_obj_get_child</span><span class="p">(</span><span class="n">cont</span><span class="p">,</span> <span class="n">i</span><span class="p">);</span>
        <span class="n">lv_area_t</span> <span class="n">child_a</span><span class="p">;</span>
        <span class="n">lv_obj_get_coords</span><span class="p">(</span><span class="n">child</span><span class="p">,</span> <span class="o">&amp;</span><span class="n">child_a</span><span class="p">);</span>

        <span class="n">lv_coord_t</span> <span class="n">child_y_center</span> <span class="o">=</span> <span class="n">child_a</span><span class="p">.</span><span class="n">y1</span> <span class="o">+</span> <span class="n">lv_area_get_height</span><span class="p">(</span><span class="o">&amp;</span><span class="n">child_a</span><span class="p">)</span> <span class="o">/</span> <span class="mi">2</span><span class="p">;</span>

        <span class="n">lv_coord_t</span> <span class="n">diff_y</span> <span class="o">=</span> <span class="n">child_y_center</span> <span class="o">-</span> <span class="n">cont_y_center</span><span class="p">;</span>
        <span class="n">diff_y</span> <span class="o">=</span> <span class="n">LV_ABS</span><span class="p">(</span><span class="n">diff_y</span><span class="p">);</span>

        <span class="cm">/*Get the x of diff_y on a circle.*/</span>
        <span class="n">lv_coord_t</span> <span class="n">x</span><span class="p">;</span>
        <span class="cm">/*If diff_y is out of the circle use the last point of the circle (the radius)*/</span>
        <span class="k">if</span><span class="p">(</span><span class="n">diff_y</span> <span class="o">&gt;=</span> <span class="n">r</span><span class="p">)</span> <span class="p">{</span>
            <span class="n">x</span> <span class="o">=</span> <span class="n">r</span><span class="p">;</span>
        <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
            <span class="cm">/*Use Pythagoras theorem to get x from radius and y*/</span>
            <span class="n">lv_coord_t</span> <span class="n">x_sqr</span> <span class="o">=</span> <span class="n">r</span> <span class="o">*</span> <span class="n">r</span> <span class="o">-</span> <span class="n">diff_y</span> <span class="o">*</span> <span class="n">diff_y</span><span class="p">;</span>
            <span class="n">lv_sqrt_res_t</span> <span class="n">res</span><span class="p">;</span>
            <span class="n">lv_sqrt</span><span class="p">(</span><span class="n">x_sqr</span><span class="p">,</span> <span class="o">&amp;</span><span class="n">res</span><span class="p">,</span> <span class="mh">0x8000</span><span class="p">);</span>   <span class="cm">/*Use lvgl&#39;s built in sqrt root function*/</span>
            <span class="n">x</span> <span class="o">=</span> <span class="n">r</span> <span class="o">-</span> <span class="n">res</span><span class="p">.</span><span class="n">i</span><span class="p">;</span>
        <span class="p">}</span>

        <span class="cm">/*Translate the item by the calculated X coordinate*/</span>
        <span class="n">lv_obj_set_style_translate_x</span><span class="p">(</span><span class="n">child</span><span class="p">,</span> <span class="n">x</span><span class="p">,</span> <span class="mi">0</span><span class="p">);</span>

        <span class="cm">/*Use some opacity with larger translations*/</span>
        <span class="n">lv_opa_t</span> <span class="n">opa</span> <span class="o">=</span> <span class="n">lv_map</span><span class="p">(</span><span class="n">x</span><span class="p">,</span> <span class="mi">0</span><span class="p">,</span> <span class="n">r</span><span class="p">,</span> <span class="n">LV_OPA_TRANSP</span><span class="p">,</span> <span class="n">LV_OPA_COVER</span><span class="p">);</span>
        <span class="n">lv_obj_set_style_opa</span><span class="p">(</span><span class="n">child</span><span class="p">,</span> <span class="n">LV_OPA_COVER</span> <span class="o">-</span> <span class="n">opa</span><span class="p">,</span> <span class="mi">0</span><span class="p">);</span>
    <span class="p">}</span>
<span class="p">}</span>

<span class="cm">/**</span>
<span class="cm"> * Translate the object as they scroll</span>
<span class="cm"> */</span>
<span class="kt">void</span> <span class="nf">lv_example_scroll_6</span><span class="p">(</span><span class="kt">void</span><span class="p">)</span>
<span class="p">{</span>
    <span class="n">lv_obj_t</span> <span class="o">*</span> <span class="n">cont</span> <span class="o">=</span> <span class="n">lv_obj_create</span><span class="p">(</span><span class="n">lv_scr_act</span><span class="p">());</span>
    <span class="n">lv_obj_set_size</span><span class="p">(</span><span class="n">cont</span><span class="p">,</span> <span class="mi">200</span><span class="p">,</span> <span class="mi">200</span><span class="p">);</span>
    <span class="n">lv_obj_center</span><span class="p">(</span><span class="n">cont</span><span class="p">);</span>
    <span class="n">lv_obj_set_flex_flow</span><span class="p">(</span><span class="n">cont</span><span class="p">,</span> <span class="n">LV_FLEX_FLOW_COLUMN</span><span class="p">);</span>
    <span class="n">lv_obj_add_event_cb</span><span class="p">(</span><span class="n">cont</span><span class="p">,</span> <span class="n">scroll_event_cb</span><span class="p">,</span> <span class="n">LV_EVENT_SCROLL</span><span class="p">,</span> <span class="nb">NULL</span><span class="p">);</span>
    <span class="n">lv_obj_set_style_radius</span><span class="p">(</span><span class="n">cont</span><span class="p">,</span> <span class="n">LV_RADIUS_CIRCLE</span><span class="p">,</span> <span class="mi">0</span><span class="p">);</span>
    <span class="n">lv_obj_set_style_clip_corner</span><span class="p">(</span><span class="n">cont</span><span class="p">,</span> <span class="nb">true</span><span class="p">,</span> <span class="mi">0</span><span class="p">);</span>
    <span class="n">lv_obj_set_scroll_dir</span><span class="p">(</span><span class="n">cont</span><span class="p">,</span> <span class="n">LV_DIR_VER</span><span class="p">);</span>
    <span class="n">lv_obj_set_scroll_snap_y</span><span class="p">(</span><span class="n">cont</span><span class="p">,</span> <span class="n">LV_SCROLL_SNAP_CENTER</span><span class="p">);</span>
    <span class="n">lv_obj_set_scrollbar_mode</span><span class="p">(</span><span class="n">cont</span><span class="p">,</span> <span class="n">LV_SCROLLBAR_MODE_OFF</span><span class="p">);</span>

    <span class="kt">uint32_t</span> <span class="n">i</span><span class="p">;</span>
    <span class="k">for</span><span class="p">(</span><span class="n">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="n">i</span> <span class="o">&lt;</span> <span class="mi">20</span><span class="p">;</span> <span class="n">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
        <span class="n">lv_obj_t</span> <span class="o">*</span> <span class="n">btn</span> <span class="o">=</span> <span class="n">lv_btn_create</span><span class="p">(</span><span class="n">cont</span><span class="p">);</span>
        <span class="n">lv_obj_set_width</span><span class="p">(</span><span class="n">btn</span><span class="p">,</span> <span class="n">lv_pct</span><span class="p">(</span><span class="mi">100</span><span class="p">));</span>

        <span class="n">lv_obj_t</span> <span class="o">*</span> <span class="n">label</span> <span class="o">=</span> <span class="n">lv_label_create</span><span class="p">(</span><span class="n">btn</span><span class="p">);</span>
        <span class="n">lv_label_set_text_fmt</span><span class="p">(</span><span class="n">label</span><span class="p">,</span> <span class="s">&quot;Button %d&quot;</span><span class="p">,</span> <span class="n">i</span><span class="p">);</span>
    <span class="p">}</span>

    <span class="cm">/*Update the buttons position manually for first*/</span>
    <span class="n">lv_event_send</span><span class="p">(</span><span class="n">cont</span><span class="p">,</span> <span class="n">LV_EVENT_SCROLL</span><span class="p">,</span> <span class="nb">NULL</span><span class="p">);</span>

    <span class="cm">/*Be sure the fist button is in the middle*/</span>
    <span class="n">lv_obj_scroll_to_view</span><span class="p">(</span><span class="n">lv_obj_get_child</span><span class="p">(</span><span class="n">cont</span><span class="p">,</span> <span class="mi">0</span><span class="p">),</span> <span class="n">LV_ANIM_OFF</span><span class="p">);</span>
<span class="p">}</span>

<span class="cp">#endif</span>
</pre></div>
</div>
</div>
</div>
</div>
<div class="section" id="micropython">
<h3>MicroPython<a class="headerlink" href="#micropython" title="Permalink to this headline">¶</a></h3>
<p>No examples yet.</p>
</div>
</div>
</div>


           </div>
           
          </div>
          <footer>
    <div class="rst-footer-buttons" role="navigation" aria-label="footer navigation">
        <a href="layer.html" class="btn btn-neutral float-right" title="Layers" accesskey="n" rel="next">Next <span class="fa fa-arrow-circle-right" aria-hidden="true"></span></a>
        <a href="style-props.html" class="btn btn-neutral float-left" title="Style properties" accesskey="p" rel="prev"><span class="fa fa-arrow-circle-left" aria-hidden="true"></span> Previous</a>
    </div>

  <hr/>

  <div role="contentinfo">
    <p>
        &#169; Copyright 2020, LVGL LLC.
      <span class="lastupdated">
        Last updated on Jan 10, 2022.
      </span>

    </p>
  </div>
    
    
    
    Built with <a href="https://www.sphinx-doc.org/">Sphinx</a> using a
    
    <a href="https://github.com/readthedocs/sphinx_rtd_theme">theme</a>
    
    provided by <a href="https://readthedocs.org">Read the Docs</a>. 

</footer>
        </div>
      </div>

    </section>

  </div>
  

  <script type="text/javascript">
      jQuery(function () {
          SphinxRtdTheme.Navigation.enable(true);
      });
  </script>

  
  
    
  

<style>
  .wy-side-nav-search > div[role="search"] {
    color: black;
  }
</style>
 <script type="text/javascript">
    $(document).ready(function() {
        $(".toggle > *").hide();
        $(".toggle .header").show();
        $(".toggle .header").click(function() {
            $(this).parent().children().not(".header").toggle(400);
            $(this).parent().children(".header").toggleClass("open");
        })
    });
</script>

<script type="text/javascript">
function add_version_selector()
{
    return fetch("https://raw.githubusercontent.com/lvgl/docs_compiled/gh-pages/versionlist.txt")
        .then(res => res.text())
        .then(text => {
            const versions = text.split("\n").filter(version => version.trim().length > 0);
            let p = document.getElementById("rtd-search-form").parentElement;
            p.innerHTML = `
            <select name="versions" id="versions" onchange="ver_sel()" style="border-radius:5px; margin-bottom:15px">
            ${versions.map(version => {
                const versionName = "v" + ((version.indexOf(".") != -1) ? version : (version + " (latest minor)"));
                return `<option value="${version}">${versionName}</option>`;
            })}
            </select>` + p.innerHTML;
        });
}

function ver_sel()
{
  var x = document.getElementById("versions").value;
  window.location.href = window.location.protocol + "//" + window.location.host + "/" + x + "/";
}

document.addEventListener('DOMContentLoaded', (event) => {
    add_version_selector().then(() => {
        var value = window.location.pathname.split('/')[1];
        document.getElementById("versions").value = value;
    });
    
})
</script>


</body>
</html>